Jump to content
Search Community

ScrollTrigger not working with SVG's

mado1 test
Moderator Tag

Recommended Posts

Hello,

 

Does ScrollTrigger work with SVG's? I am trying to animate an SVG with ScrollTrigger like so:

 

gsap.timeline({
  scrollTrigger: {
    trigger: ".phone",
    start: "center bottom",
    end: "top top",
    scrub: true
  }
})

.to("#back",  { y: 178 }, 0)
.to("#mid1", { y:  83 }, 0)
.to("#mid2", { y: 48 }, 0)

The thing is that it does not work and instead just applies y position and nothing else. I've included a codepen for a demo. 

See the Pen oNbLeZW by monsmado (@monsmado) on CodePen

Link to comment
Share on other sites

Absolutely it works with SVG. ScrollTrigger and GSAP should work with just about anything. It looks like you initially just used the wrong plugin - you loaded ScrollToPlugin instead of ScrollTrigger :)

 

Looks like you fixed that now and it's working, but you set up the start/end in a way that might make it look too sudden on smaller screens. Here's what I'd recommend: 

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

 

Just have it start at "center center" and then the end could be a relative value like "+=50%". 

 

Does that help? 

 

Oh, and thanks for providing the CodePen demo! Very helpful in identifying the issue. 

  • Like 3
Link to comment
Share on other sites

@GreenSock, Thanks for the help. Indeed I loaded the wrong plugin at first but then went to the documentation page for ScrollTrigger and realized that haha.
 

Also the relative value helped with getting the animation to work on scroll! 

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