ScrollTrigger not working with SVG's

[mado1 9 Likes (Newbie)]

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

[GreenSock 18,597 Likes (Superhero)]

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. 

[mado1 9 Likes (Newbie)]

@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!