Share Posted November 21, 2019 HI All, I was hopping to grab some of your amazing brain as I need to make this animation work like a charm I have a line that should animate while scrolling down. I'm kind of there pretty much, but I have the line that animates in the opposite way!!! So, line animates balls(icons) animates with it. Anyone able to explain what I'm missing? Thank you for any help you can offer!!! See the Pen ExxMdyp?editors=1010 by davide77 (@davide77) on CodePen Link to comment Share on other sites More sharing options...
Share Posted November 21, 2019 Hey DD77, You should be able to reverse the direction using a vector editing software. Here's how to do so using Illustrator: Alternatively you could just use drawSVG to go backwards by switching out the line that you have for this line: .fromTo("#path_line polyline", 1, {drawSVG:"100% 100%"}, {drawSVG: "0% 100%"}, 0) You can see using your dev tools that it is indeed working. See this post for more info: Link to comment Share on other sites More sharing options...
Author Share Posted November 21, 2019 Thank you so much! Looks much better! DO you know why the icons(balls) aren't showing correctly? and the first parth of the line is animating still in a opposite way? See the Pen RwwdEXm?editors=1010 by davide77 (@davide77) on CodePen Link to comment Share on other sites More sharing options...
Share Posted November 21, 2019 1 minute ago, DD77 said: DO you know why the icons(balls) aren't showing correctly? They show up, some of the timings are just off. You'll have to play around with it to get it working the way you need it to. 2 minutes ago, DD77 said: and the first parth of the line is animating still in a opposite way? I don't see this behavior. Link to comment Share on other sites More sharing options...
Author Share Posted November 21, 2019 As it starts, the animation, the first line on top, scrolls in a opposite direction, is quite odd. I've changed the timing and looks much better, but still not quite sure I'm doing it right. Any suggestion? See the Pen PooLgYd?editors=1010 by davide77 (@davide77) on CodePen Link to comment Share on other sites More sharing options...
Share Posted November 21, 2019 18 minutes ago, DD77 said: As it starts, the animation, the first line on top, scrolls in a opposite direction, is quite odd. I'm guessing that's because of how your path is setup. Maybe there's an extra point that's down a bit so it goes up and then back down the same path? I don't have a vector editor installed so I can't check for you. 28 minutes ago, DD77 said: I've changed the timing and looks much better, but still not quite sure I'm doing it right. Any suggestion? Sorry, I can't to it for you plus I've never really used ScrollMagic so I don't have much insight to give. Link to comment Share on other sites More sharing options...
Author Share Posted November 21, 2019 Thank you! I would rather fix this scroll path position firstly. Doesn’t feel right at all. No idea how to fix this. Really appreciate if you could help Link to comment Share on other sites More sharing options...
Share Posted November 21, 2019 Hey @DD77, 'scrolling path': Zach is right. It is one point too much. Delete the last point (453.56 206.44). Timing: That's a little trial and error. To see the running endpoint of the path - more or less - in the viewport, I've set the svg narrower here and the timing of the drawSVG animation on 2.8. In addition, the svg is set lower (lower than 'triggerHook: 0.2') to see the start. The timing of the BALLS must of course be adjusted. See the Pen MWWxMzN by mikeK (@mikeK) on CodePen I hope it helps you. Mikel 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 21, 2019 @mikel hi, thank you, yes helps a lot! I've managed to changes the timing of the balls manually. Is this the best way? See the Pen PoogbEZ?editors=1010 by davide77 (@davide77) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted November 22, 2019 @mikel @ZachSaucier Guys, any idea why with the new GSAP3 the plugin MorphSVGPlugin is giving me this error? pen.js:4 Uncaught ReferenceError: MorphSVGPlugin is not defined Link to comment Share on other sites More sharing options...
Share Posted November 22, 2019 Just now, DD77 said: any idea why with the new GSAP3 the plugin MorphSVGPlugin is giving me this error? pen.js:4 Uncaught ReferenceError: MorphSVGPlugin is not defined That error happens when MorphSVGPlugin fails to load. You can check in the network tab of your dev tools. If you're using a build tool, make sure you gsap.registerPlugin(MorphSVGPlugin); after your imports. Link to comment Share on other sites More sharing options...
Author Share Posted November 22, 2019 @ZachSaucier that happened when I updated the plug in. With the previews GSAP was working fine. Any idea? See the Pen PoogbEZ?editors=1010 by davide77 (@davide77) on CodePen Link to comment Share on other sites More sharing options...
Share Posted November 22, 2019 5 minutes ago, DD77 said: happened when I updated the plug in. With the previews GSAP was working fine. Any idea? The plugins are updated for GSAP 3 as well. Make sure you're using the v3 versions. You can copy the URLs that work on CodePen from here: See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted November 22, 2019 @ZachSaucier no luck! I changed all plugins, you can see my demo I have an error, looks like the way MorphSVGPlugin loads is wrong Link to comment Share on other sites More sharing options...
Share Posted November 22, 2019 Hey @DD77, GSAP 3.0 - What was REMOVED? BezierPlugin - replaced with MotionPathPlugin (not in the core). Here an example (forked from a V2 version): See the Pen jOORGda by mikeK (@mikeK) on CodePen Hey ZACH: Please check https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js vs. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js?v=46 My codePen has problems with v=46 (?). Happy motion ... Mikel Link to comment Share on other sites More sharing options...
Share Posted November 22, 2019 9 minutes ago, mikel said: My codePen has problems with v=46 (?). I tried switching out the version number for 46 and it seemed to work fine. The version number is just to prevent an old version from being cached. Do you have a demo where it's not working? Link to comment Share on other sites More sharing options...
Share Posted November 22, 2019 1 hour ago, DD77 said: no luck! I changed all plugins, you can see my demo I have an error, looks like the way MorphSVGPlugin loads is wrong It works fine for me. In GSAP 3 you don't even need MorphSVGPlugin though because the same functionality is baked into the new MotionPathPlugin: See the Pen QWWPOJJ?editors=0010 by GreenSock (@GreenSock) on CodePen Note that I didn't convert all of your script into GSAP 3 format, I just fixed the errors. Link to comment Share on other sites More sharing options...
Share Posted November 22, 2019 Hey ZACH, See the Pen xxxePMV by mikeK (@mikeK) on CodePen Just changed the link Sorry - my default !!!!! I did not link the MotionPathPlugin Too fast, too bad. 1 Link to comment Share on other sites More sharing options...
Share Posted September 30, 2020 FYI this is even easier now with the ScrollTrigger plugin See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen 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