Animate text with javascript / Angular

Question

Here is my fiddle : http://jsfiddle.net/ZYJsK/302/

I want to animate texts like this site : http://vegas.jaysalvat.com/

This section ====>

My Js :

var app = angular.module("app", []);

app.controller('mainCtrl', function ($scope,$element) {
    var texts = ["example1", "example2", "example3"];
    var textToAdd = angular.element("#sizin");
    var count = 0;
    function changeText (){
      textToAdd.text(texts[count]);
        count < 3 ? count++ : count = 0;
    }

    setInterval(changeText,500);
});

Any Advice Would be great ? Thanks a million

i want to animate it like the website i mentioned i don't know how to — Sadeghbayan
– Sadeghbayan, Commented Oct 24, 2015 at 20:57
codepen.io/GreenSock/pen/gFHza check this please , GSAP can do the tricks , have you worked with GSAP ? — Sadeghbayan
– Sadeghbayan, Commented Oct 24, 2015 at 20:59

Hamlet Hakobyan · Accepted Answer · 2015-10-24 21:11:16Z

2

You should bind to scope variable and change it by timer and call $apply.

Something like this.

$scope.initComVal = '.com';
$scope.comval = '';
function changeText (){
    if($scope.comval.length === $scope.initComVal.length)
        $scope.comval = '';
    else
    {
        $scope.comval = $scope.initComVal.substring(0, $scope.comval.length+1);
        $scope.$apply();
    }
}

JSFiddle

answered Oct 24, 2015 at 21:11

Hamlet Hakobyan

33.5k6 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sadeghbayan Over a year ago

Thanks for your answer , how about multi word ? .com and available ?

Collectives™ on Stack Overflow

Animate text with javascript / Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related