Jump to content
Search Community

ScrollTrigger Animate SVG Elements

rala test
Moderator Tag

Recommended Posts

Hi, when I try to animate svg elements  when the section in the viewport something wrong happened an the animation start suddenly and not smooth

I used label to first animate lamp and mountains and clouds at the same time then I want to repeat -1 the animation of the lamp light and the  cloud floating  could you please help me to know the error I've made .

See the Pen OJxJLmj by roleno (@roleno) on CodePen

Link to comment
Share on other sites

Hi rala, 

 

I'm really unsure about what you are trying to do here. You can't have scrub and toggleActions as those are conflicting behaviors. If you're trying to scrub, you cannot have animations with a repeat of -1 as that would mean that scrolling would have to be infinite, which it's not.

 

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

Thank you so much for your explanation I really appreciate your helping and the quick. Response in the forum thank you .

But can you please explain more or send  a reference link  to know why scrub and scroll actions   conflict  

Link to comment
Share on other sites

This demo shows the difference. The b trigger uses scrub, so it's animation is tied to scroll just like a video scrubber.

 

The c trigger uses toggle actions, which is just like .play(), .pause(), .resume(), and .restart() on tween or timeline. Note that the toggleActions is optional. If you don't include it, it will automatically be set to play none none none.

 

See the Pen zYEYwVx by GreenSock (@GreenSock) on CodePen

 

  • Like 2
  • Thanks 1
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...