Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gilesht

How To Use ScrollTrigger change SVG

Recommended Posts

Hi All

 

My question extends @rimedtades post


which was answered answered by @Cassie . I want to achieve the same result as her great codepen example

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


but fade I/O 3 groups of SVG rather than HTML text.

I've branched her example and attempted to make the minimum of changes as some of the theory is very new to me (i've made a few guesses along the way as well around the .toArray() and .forEach() logic).

It's good to see the scroll markers appear, console does not return any issues, but I'm not seeing the demo text fade up & down. Sorry for the very basic orientation ... really appreciate any help

See the Pen BawgKVz by gilesht (@gilesht) on CodePen

Link to comment
Share on other sites

Hi gilesht,

 

One issue is that you are using an ID of text for all your text, which is invalid. There can only be 1 unique ID in your HTML/SVG. You could use a class with the name text, but beyond that, I'm not sure how you are expecting this to work. You can't pin elements inside an SVG and a SVG doesn't scroll. Just think of it as an image.

 

You may need to rethink what you are actually trying to do here.

 

Link to comment
Share on other sites

hi @OSUblake really appreciate  your help

  • slapping my head re unique IDs (apologies it's been a while)
  • but a bit more concerned on your comments about being unable to scroll & pin SVG's
  • I have to be honest that I'm coming back into this from a background in GSAP + ScrollMagic, where SVG animation was supported
  • are you saying this is no longer an option ?
  • if so, is there another format thats supported?
  • the whole magic of SVGs was that it appeared to be an image, but that you could group and animate sections down to a finite point and animate them
Link to comment
Share on other sites

2 minutes ago, gilesht said:

I have to be honest that I'm coming back into this from a background in GSAP + ScrollMagic, where SVG animation was supported

 

SVGs are supported, but you can't pin an element inside of an SVG because the there is no scrolling inside the SVG. Do you see a scrollbar inside your SVG? It's not a GSAP issue. It the nature of SVGs.

 

You can pin the actual <svg> element and animate whatever you want inside the SVG, and even use elements inside the SVG as a trigger, but your demo is trying to treat the SVG like an HTML document that is scrolling.

 

Link to comment
Share on other sites

Argh! .... I see what you are saying @OSUblake thank you ... that gives me some new ideas to work on. I'll come back to you shortly

  • Like 1
Link to comment
Share on other sites

Hi @gilesht

 

If you want to scroll through an SVG and trigger animations along the way this demo from my course ScrollTrigger Express may help

 

See the Pen bb90e695148fec0087f76c2f703cbdb4 by snorkltv (@snorkltv) on CodePen

 

I like to keep things simple to make them easier for my students to digest but it was inspired by this amazing example from Shunya Koide

 

See the Pen rNxzvgp?editors=0010 by shunyadezain (@shunyadezain) on CodePen

 

There's so much you can do with ScrollTrigger and SVG!

 

 

 

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