imChris Posted October 29, 2020 Share Posted October 29, 2020 Hey Everyone, First post on here, such an active and awesome community though! I'm wondering if anyone can shed any light on why an element is not rotating, I guess I'm doing something incorrect, a nudge in the right direction would be amazing. As you can see in the codepen, I've got a absolutely positioned div which is meant to slide from the each of the green boxes (that's where it should land every time) what I'm struggling with is for the div to rotate to the direction it's moving to. Also, if anyone can see something drastically wrong I'm doing it would be appreciated, thanks! C See the Pen NWrYxzp?editors=0110 by imchris (@imchris) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 30, 2020 Share Posted October 30, 2020 Hey Chris and welcome to the GreenSock forums. A few notes: You're using an old version of GSAP. We highly recommend using GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features! Upgrading is easy: In GSAP 3 the BezierPlugin was replaced with the new and improved MotionPathPlugin. ScrollMagic is not a GreenSock product and we don't support it. Instead we recommend the official GSAP scroll plugin: ScrollTrigger! It's better in every way. Read the docs to get started. How about you upgrade to GSAP 3, try using the MotionPathPlugin and ScrollTrigger, and if you have issues post back here with a minimal demo and we'll help you out? Link to comment Share on other sites More sharing options...
imChris Posted October 31, 2020 Author Share Posted October 31, 2020 Thanks for the heads up! I will do so and report back if i have any issues! Thanks Zach! Link to comment Share on other sites More sharing options...
imChris Posted November 1, 2020 Author Share Posted November 1, 2020 Hey, So, taking the advice from Zach I rewrote the pen using scroll trigger and have roughly the effect I'm looking for. My only question now is whether I can make the movement of the div smoother, currently it goes in a few steps (rotate, then translateX and rotate back to zero). Sorry if this seems like a silly question, I did look through the docs but couldn't find any other way of doing it? I'm guessing this is where the motion path plugin comes into it? Codepen for reference - See the Pen RwRMXad?editors=1010 by imchris (@imchris) on CodePen Thanks, and appreciate any pointers! C Link to comment Share on other sites More sharing options...
mikel Posted November 1, 2020 Share Posted November 1, 2020 Hey @imChris, It could be a questions of positioning (more here) e.g. try timeline.to(boxInner, { x: sectionMovement.getAttribute('data-x'), ease: animationEase, //overwrite: 'auto' },0) Happy precise timing ... Mikel 2 Link to comment Share on other sites More sharing options...
imChris Posted November 1, 2020 Author Share Posted November 1, 2020 Hey Mikel, Thanks for that, that definitely makes things a little better, being able to control as and when it happens. My main concern is that the animation happens in three distinct parts, first the rotation, then the movement across the X axis and finally the rotation back to zero. What I'd like would be for everything to appear seamless, the three stages all merged into one essentially. I've tried setting the timings to all happen at once which is a little better but still not quite right. Link to comment Share on other sites More sharing options...
mikel Posted November 1, 2020 Share Posted November 1, 2020 Hey @imChris, How would this variant be? See the Pen 8c82cde85595852c08943a015e69a4e3?editors=1010 by mikeK (@mikeK) on CodePen Happy swinging ... Mikel 2 Link to comment Share on other sites More sharing options...
imChris Posted November 1, 2020 Author Share Posted November 1, 2020 Hey @mikel This looks more like the effect I was looking for, Let me have a look around it and take it apart. Thanks, really appreciate your help! Chris 1 Link to comment Share on other sites More sharing options...
imChris Posted November 2, 2020 Author Share Posted November 2, 2020 Hey @mikel, Taking your approach and using motionPath, I then decided to use one continuous path which seems to fit what I'm looking to achieve more so. Is there a way to keep the element centered as I'm scrolling? I'm guessing I'll have to run a function on update to set the position or is this the wrong approach? Thanks again, sorry for the repeated questions! Codepen for reference - See the Pen QWErZVm?editors=0010 by imchris (@imchris) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 1 hour ago, imChris said: Is there a way to keep the element centered as I'm scrolling? I'm guessing I'll have to run a function on update to set the position or is this the wrong approach? There's no magic to doing so - it's just a matter of your path, your easing, and such. It may or may not be helpful to fix the path element and size it to the viewport's size. 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