Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
harish118

Move and fade html element

Recommended Posts

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

 

 

Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×