Jump to content
Search Community

How can I make two separate lines slide in and then slide out, one after the other

dragon_89 test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I am trying to slide two lines in a campaign (one line in one frame and the second in the second frame). I want the second line to follow the first line after few seconds.

I am able to slide in and slide out the first line but when I add the second line in the code, the code does not work.

 

Can anyone help me out in this.

 

Here is the link to the jsfiddle:

https://jsfiddle.net/5pq750ko/

 

(If you remove line 4 and 5 from the JS code, you will see the code working. But when I will add the lines back, the code stops working)

 

 

Thanks

Link to comment
Share on other sites

Thanks for the demo. Very helpful.

It looks like the problem was that you had a semi-colon at the end of line 3 that was breaking the chaining of lines 4 and 5.

 

var tl = new TimelineLite();
tl.from("#title",1,{ left:'-100%' , ease: Power4.easeOut })
  .to("#title",1,{ left:'100%', ease: Power4.easeIn } ,'+=1'); <-- remove this
  .from("#title1",1,{ left:'-100%' , opacity:1,  ease: Power4.easeOut })
  .to("#title1",1,{ left:'100%', ease: Power4.easeIn } ,'+=1');

 

Remove the semi-colon and the animation runs as expected: https://jsfiddle.net/5pq750ko/1/

  • Like 2
Link to comment
Share on other sites

How can I fade out an image when it eases out?

I used this: tl1.from("#one",1,{ left:'-100%' , ease: Power1.easeOut })

 

So the image slides in from the right, waits for few seconds and slides/ease out on the left. Is there a way of fading the image when it starts sliding/ease out?

 

 

Thanks

Link to comment
Share on other sites

If you're trying to animate the opacity to 1 on a from() tween, you'd need to make sure the current opacity is 1 and then animate it from 0. You have to remember that from tweens will animate to their current values 'from' whatever values you'd like to start at. So if your current opacity is 1, you'd then animate:

tl1.from("#one",1,{ left:'-100%' , opacity:0, ease: Power1.easeOut });

A second option would be add another to() tween that only animates the opacity and starts when the from() tween starts:

tl1.from("#one",1, { left:'-100%' , ease: Power1.easeOut }, "yourLabel" )
tl1.to("#one",1, { opacity:1 , ease: Power1.easeOut }, "yourLabel" )

Another option would be a fromTo() tween 

tl1.fromTo("#one", 1, { opacity:0  }, { opacity:1  });

Just to be clear on the eases. An easeOut has nothing to do with an element leaving the stage. The tween itself eases to a gradual stop with an easeOut and starts gradually with an easeIn. So my recommendation for an element leaving the stage would actually be an easeIn or an easeInOut. 

 

Hopefully that makes sense and helps.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

I got that but now I am facing a different issue. I am not able to fade in and slide down an image.

If I remove autoAlpha then the image slides in into the frame and then slides down after some time. But I need to get the image to slide in as well as fade in at the same time and I am not getting it while using autoAlpha.

.from("#one",.5,{ top:'-20%',ease: Power1.easeOut, autoAlpha:0})
.to("#one",1,{autoAlpha:1 })
.to("#one",0.5,{ top:'100%', ease: Power1.easeIn} ,'+=1')
Link to comment
Share on other sites

Sorry, you've lost me now.

 

Do you have a demo of the problem? I looked at your demo from your first post, but there are no tweens in that one using autoAlpha. If you could make a new demo and explain exactly what should happen, that would be helpful.

 

Thanks.

:)

Link to comment
Share on other sites

Hi, 

 

Here is the link to the code. The second word just fades in. It does not come out from. I am not able to slide in and fade at the same time.

I used autoAlpha in order to give the fade in effect but it then does not slide down.

If I remove autoAlpha then the image slides in into the frame and then slides down after some time.

 

https://jsfiddle.net/5pq750ko/1/

Link to comment
Share on other sites

In your CSS you are setting the opacity of #title1 to 0. In the tween you are then animating 'from' 1. That means it will animate 'from' 1 to it's current value of 0 so you won't see it. In order to correct this you need to make two changes:

// remove this on line 31 of your CSS, you don't need it 
#title1{
    opacity:0;
  }
//switch your third tween from this
.from("#title1",1,{ left:'-100%' , opacity:1,  ease: Power4.easeOut })

// to this
.from("#title1",1,{ left:'-100%' , opacity:0,  ease: Power4.easeOut })

If you make those changes, you should see the desired behavior.

 

Here's some more reading to better understand from() tweens.

 

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

o.k. - let's take a look at your code.

tl.from("#title",1,{ left:'-100%' , ease: Power4.easeOut })
  .to("#title",1,{ left:'100%', ease: Power4.easeIn } ,'+=1')
  .from("#title1",1,{ top:'-100%' , opacity:1,  ease: Power4.easeOut,  autoAlpha:0 })
  .to("#title1",1,{autoAlpha:1 })
  .to("#title1",1,{ top:'100%', ease: Power4.easeIn } ,'+=1');

Your first two tweens with the '#title" element are fine.

 

Your 3rd tween: you're using opacity and autoAlpha. autoAlpha is a combination of opacity and visibility so you can delete the opacity property from that one. You said the fade doesn't work on this tween, but it actually does work just fine. What's happening is that you're moving the "#title1" element a long distance and most of that distance is not visible so by the time it gets to your stage, the fade is complete. You can try a smaller distance to see that it is working.

 

You do not need the 4th tween because the element is already at an autoAlpha value of 1.

 

Please use the following code and you should get the desired behavior:

var tl = new TimelineLite();
tl.from("#title", 1, { left:'-100%', ease: Power4.easeOut })
  .to("#title", 1, { left:'100%', ease: Power4.easeIn }, '+=1')
  .from("#title1", 1, { top:'-5%', autoAlpha:0,  ease: Power4.easeOut })
  .to("#title1", 1, { top:'100%', ease: Power4.easeIn }, '+=1');

Happy tweening.

:)

  • Like 3
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.
×
×
  • Create New...