Animating an object along a 45 degree angle

[NickWoodward]

Hey all,

I've almost got the effect I'm after, but it's been a bit of guesswork. You can probably see the animation I'm trying to get - the film strip cycles when you scroll - but the values are all quite arbitrary, and when I try to move the film's initial position (so the end isn't visible), the x and y animation values become incorrect.

I was just wondering if there was an easy to position and loop the svg that I hadn't thought of?

Thanks!

Nick

See the Pen Qwjyyzb?editors=1011 by nwoodward (@nwoodward) on CodePen.

[Rodrigo]

Hey Nick!

 

Is always a good idea to let GSAP handle all the transforms (even the initial ones). In this case is all about the initial position and then keep the movement completely linear (https://en.wikipedia.org/wiki/Linear_function_(calculus)) in order to keep the position.

 

Here is a fork of your demo:

See the Pen wBKMGMa by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[NickWoodward]

12 minutes ago, Rodrigo said:

Hey Nick!

 

Is always a good idea to let GSAP handle all the transforms (even the initial ones). In this case is all about the initial position and then keep the movement completely linear (https://en.wikipedia.org/wiki/Linear_function_(calculus)) in order to keep the position.

 

Here is a fork of your demo:

 

See the Pen

See the Pen wBKMGMa by GreenSock (@GreenSock) on CodePen.

by GreenSock (@GreenSock) on CodePen.

 

 

Hopefully this helps

Happy Tweening!

Awesome, thanks Rodrigo. And yeah, that makes sense about the initial transforms.

Out of interest, what's the relationship between the angle the film is at, the initial transform values, and the x and y properties of the animations? Or is it all just guesswork/tweaking the values until the element remains in place and 'spins'? I'm basically going to try and make the film larger and spin longer

I'm also assuming if I want the film to keep spinning after the section is unpinned I'd have to move the film animation into a separate timeline with its own scrolltrigger?

Sorry for the 20 questions, appreciate the help as always!

[Rodrigo]

2 hours ago, NickWoodward said:

Out of interest, what's the relationship between the angle the film is at, the initial transform values, and the x and y properties of the animations? Or is it all just guesswork/tweaking the values until the element remains in place and 'spins'? I'm basically going to try and make the film larger and spin longer

That was basically tinkering with the X/Y values after setting the angle, nothing more. Mostly because I didn't had the time to start digging into a more solid and reliable way to achieve it. My first try to doing that would be some basic geometry or trigonometry, in order to create a way to set it up regardless of the film dimensions.

2 hours ago, NickWoodward said:

I'm also assuming if I want the film to keep spinning after the section is unpinned I'd have to move the film animation into a separate timeline with its own scrolltrigger?

Yeah, one ScrollTrigger to pin the section with a smaller end value and a second one to move the film. One option could be to ensure that the film is seamless and use our Horizontal Loop helper function to repeat it and control it with ScrollTrigger, all you have to do is rotate the container 45 degrees:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen.

2 hours ago, NickWoodward said:

Sorry for the 20 questions, appreciate the help as always!

No problemo! Always happy to help!

 

Happy Tweening!

[NickWoodward]

On 7/19/2025 at 5:07 AM, Rodrigo said:

One option could be to ensure that the film is seamless and use our Horizontal Loop helper function to repeat it and control it with ScrollTrigger

Thanks Rodrigo - that's perfect.

And good to know it was tinkering - that's what I was doing but wasn't sure if I was missing something obvious. Trig feels over my head!

Nick
 

[Rodrigo]

2 hours ago, NickWoodward said:

Trig feels over my head!

This can be done with simple high school geometry, just think in terms of triangles there and every triangle has a right angle (90 degrees), so you can use Pythagoras theorem, since the space between the bottom of the film and the side of the browser window is basically a rectangle triangle:

https://en.wikipedia.org/wiki/Pythagorean_theorem

 

Happy Tweening!