Jump to content
Search Community

Diagonal lines changing direction with scrollTrigger

angelokeirsebilck test
Moderator Tag

Recommended Posts

Hi,

 

I am trying to animte a diagonal moving line together with the scrollTrigger plugin. Wanted scenario: if the users scrolls down, the line should move down vertically at 50% of scrollTrigger animation and move to left and also down at 100% of the scrollTrigger animation.

 

I know made 2 timelines, 1 with the scrolltrigger and one without, both on the same .line class.  
In the timeline with scrollTrigger i animated the rotate property, but the x value does not seem to work + it seems to flicker on scrolling down.

Any ideas of how to do this? 

 

Thanks in advance!

 

(rotation only seems to work on codepen website itself, not embedded pen)

See the Pen rNWLOQz by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

Link to comment
Share on other sites

Hey angelokeirsebilck and welcome to the GreenSock forums.

 

You've got some serious conflict in your tweens here. The tween with the ScrollTrigger is trying to animate the x and y properties but so is your infinitely looping tween. So of course there's going to be jumpy-ness. 

 

If you need to animate the same properties of the same element in different tweens, since you can't really do that when those tweens overlap due to conflict, you should instead create a wrapper element around the element and animate that wrapper element instead. That way the transforms are still applied but there is no conflict. 

 

Side note: Your ease is invalid. It should just be: "power4" or "power4.out".

 

See the Pen gOLMwYY?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi Zach,

 

Thanks, I'm still new to GSAP but really enjoying it so far!
 

So with your advice (thanks by the way) i made a new codepen with multiple lines:

See the Pen BaQzGre by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen



Problem here is that i can't figure out how to restart a single line animation. I Tried several approaches with different repeat methods but can't seem to find the right solution. Is there maybe a way to let a tween replay himself in the onComplete callback function?

Thanks!

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