Jump to content
Search Community

Animate lines from left to right and opposite

petrosmani test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello,
I have some lines on my html that i want to animate from left to their original position on scroll. 
I have the result i want to all lines in DOM except the first two lines that are already in my viewport at refresh. 
Firstly, i tried with scrollTrigger and toggleClass variables and did the animation with css only and width value. But i read somewhere that is more optimized to go with transform property. 
Can someone help me with what i'm doing wrong?

See the Pen VwBXabq by pmakos (@pmakos) on CodePen

Link to comment
Share on other sites

  • Solution

First off, if you want to animate things with GSAP you can't use transitions in your CSS, if you do CSS and GSAP will fight for control over who gets to animate and the browser will thus insert a transition each time GSAP animates something. 

 

Personally I like to start with the animation it self. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. With this I always like to start with a timeline, so that I can easily toggle ScrollTrigger on and off.

 

start: 'top bottom', means when the bottom of the browser hits the top of the element play the animation, this doesn't really work, because the start trigger will then always be below element trigger. I've now set them to be on the top with an offset of 200px, so that you can see when it happens.

 

I had to rewrite your setup and because nothing much changes between the left or the right I just check if the element has the .right class and change it xPercent value. Hope it helps and happy tweening! 

 

See the Pen PoBRGoQ?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

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