[Move and fade html element]

hi,

 

And thanks for the link jamie on documentation. I'll check that out. My first experience(s) with GSAP JS is that it is absolutely fantastic.

 

Cheers,

M&M

[Move and fade html element]

Hi harish118 

 

you can choose one of these methods :

 

Tween :

TweenMax.to(logo, 1, { x:-100 , opacity:0 , ease:Power1.easeInOut ,repeat:-1  });

or use Timeline method :

var tl = new TimelineMax({repeat:-1})
tl.to(logo , 1, { x:-100 , ease:Back.easeInOut })
  .to(logo , 0.5, {  opacity:0 , ease:Power1.easeInOut }); 

and for other Easing pls check this out :

http://greensock.com/docs/#/HTML5/Easing/

Thank you sooo much jamie. That's exactly what I needed! ".)

 

Cheers,

M&M

[Move and fade html element]

hi,

 

I am new to greensock js but it just seems to be awesome. I just got started tonight as I had to find a way to smoothen a javascript animation in one of our other projects. GreenSock animation it seems does not cause other animations to stutter/stop/jerk. But I quickly need this small help

 

I have to move (100px?) an html element from point a to point b, and then fade it out. I have to keep repeating this sequence. A normal move should suffice but if I can add some easing or something then it will be great.

 

Let me explain the scenario:

 

I have an arrow that actually represents a moving vehicle. I just need to animate this arrow (make it appear as if it is moving from point a to point b, and then fade it out. Then repeat the sequence again.

 

I just coded something like

            var logo = document.getElementById("id_1_2_c");
            TweenMax.to(logo, 1, {left:"100px", repeat:-1});

But I need it to move right, and fade out once it reaches the end. Then it will have to appear and start moving from left to right again, and then fade. This sequence should go on infinitely. If I can add any easing to make it look nicer, that will be awesome

 

 

Thanks a ton,

 

If anyone can suggest how I can achieve this, it will be wonderful.

 

Harish