Jump to content
Search Community

ScrollTrigger for Multiple images

mattered
Moderator Tag

Recommended Posts

mattered
Posted

Hi all!

 

I am working on an animation using scroll trigger in our hero:
https://mattered.com/ai-creative.php


i have values set for each image but i do not really feel like this is the best way to achieve the "fly though" effect. different screen sizes prove very problematic... can anyone help identify if there is a better way to do this?

 

Here is an inspo for a similar effect 

https://www.itsoffbrand.com/

 

Also added a code pen to help! thank you so much, any help would be great, i really feel like there must be an easier way. 

Screenshot 2025-01-09 at 9.35.24 AM.jpg

See the Pen PwYJeQN by Victor-Ricci-the-vuer (@Victor-Ricci-the-vuer) on CodePen.

Posted

Hi,

 

That is not the simplest thing to achieve, you have to play with perspective, initial position, rotation, etc. On top of that you have to add either a custom position for each element or a random one, finally you have to scale elements up and set final positions (if needed). Unfortunately this is a bit beyond the scope of what we do in these free forums, since we don't have the time resources to create custom demos for our users or solve complex logic issues.

 

This is a rough idea of an initial setup that makes sense to me:

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

 

Hopefully this is enough to get you started.

Happy Tweening!

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...