gilesht Posted January 20, 2022 Share Posted January 20, 2022 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 More sharing options...
OSUblake Posted January 20, 2022 Share Posted January 20, 2022 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 More sharing options...
gilesht Posted January 20, 2022 Author Share Posted January 20, 2022 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 More sharing options...
OSUblake Posted January 20, 2022 Share Posted January 20, 2022 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 More sharing options...
gilesht Posted January 21, 2022 Author Share Posted January 21, 2022 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 1 Link to comment Share on other sites More sharing options...
Carl Posted January 21, 2022 Share Posted January 21, 2022 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! 4 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now