Jump to content
Search Community

Simple Transform (cant rotate)

imChris test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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.
×
×
  • Create New...