Jump to content
GreenSock

Klaus

Scrollmagic and 2 tweens

Recommended Posts

Hi, I am trying to achieve an effect that when I scroll the page I move two different lists of words,

and I can see just two word per time (one of each list).

After I see the 6 words, I unpin the lists and go to another section.

 

and I know I'm doing it quite wrong, so I'm asking for some help or tips.

 

Thank you.

See the Pen xPjZKj by sktklaus (@sktklaus) on CodePen

Link to comment
Share on other sites

That's most probably because list on left side goes up and covers shorter distance to go out of view while one on right covers longer distance, so they will never be in sync. Try placing them in center, give them all same height as that container, then they will align perfectly.

Link to comment
Share on other sites

I tried to set the same height, margin, time for both, but didn't work, the first list is still running faster.
 

Link to comment
Share on other sites

Please post a demo with code specific for this problem, it won't be easy to check it on live site.

Link to comment
Share on other sites

Alright, issue is that GreenSock has default ease of Power1.easeOut that's what was causing it. You can set global ease to Linear.easeNone or set it on individual tween.

 

See the Pen mqLNVg by Sahil89 (@Sahil89) on CodePen

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

I used the yPercent, it worked as magic.

I am really sorry for not posting on codepen, I realise that posting there it helps more me than you.

Thank you so much


 

  • Like 1
Link to comment
Share on other sites

I need to reopen this topic, the way I did was working in many computers here, but it was because they all have the same height,
when I resize the window it breaks the animation, can you help me?

See the Pen xPjZKj by sktklaus (@sktklaus) on CodePen

 

Link to comment
Share on other sites

You haven't really set it up as I had suggested. yPercent refers to height of element itself, if you set it to +100, then element will move down 100% of it's own height. If you fix it, then you will be able to change duration on resize. Using yPercent as my demo will be far more reliable.

 

https://github.com/janpaepke/ScrollMagic/issues/105

  • Like 1
Link to comment
Share on other sites

I can't work with Codepen,

 

This website is under heavy load (queue full)

We're sorry, too many people are accessing this website at the same time. We're working on this problem. Please try again later.

 

Error 502 bad gateway.

 

Is that normal?

 

Link to comment
Share on other sites

Ya sometimes, it's down for me as well.

Link to comment
Share on other sites

Ya but personally instead of animating containers, I would have animated the containing elements. Don't know why my embedded pen doesn't show up, here is the link.

 

See the Pen mqLNVg by Sahil89 (@Sahil89) on CodePen

 

  • 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.
×