Jump to content
Search Community

'Flying' image on scroll

arual test
Moderator Tag

Recommended Posts

Hi everyone,

I'm new to GSAP and I really need some help with my project.

I want to achieve something like this (see attached image) - in the hero section I have an image and when scrolling the image somehow move diagonally and transform itself in a second image when the second section is shown.

 

Any idea? Every little help is much appreciated.

Screenshot 2021-06-03 120410.png

Link to comment
Share on other sites

1 hour ago, Cassie said:

This looks like a problem for the Flip plugin and ScrollTrigger!

Take a look at the docs and give it a bash. If you're still stuck feel free to come back with a minimal demo and we'll see if we can figure it out together. ☺️

Thanks. Is there any other option? Maybe just with the scrolltrigger? i'm only trying to learn gsap so it would be great if i could use free resources.

Link to comment
Share on other sites

Sure. You can do it yourself but it won't be simple. TLDR - you have to calculate start and end positions and animate between them.


FLIP stands for First, Last, Invert, Play.

 

First: the initial state of the element(s) involved in the transition.

Last: the final state of the element(s).

Invert: here’s the fun bit. You figure out from the first and last how the element has changed, so – say – its width, height, opacity. Next you apply transforms and opacity changes to reverse, or invert, them. If the element has moved 90px down between First and Last, you would apply a transform of -90px in Y. This makes the elements appear as though they’re still in the First position but, crucially, they’re not.

Play: switch on transitions for any of the properties you changed, and then remove the inversion changes. Because the element or elements are in their final position removing the transforms and opacities will ease them from their faux First position, out to the Last position.


Here's a good place to start reading up on it. - https://aerotwist.com/blog/flip-your-animations/

If you're just playing around on codepen then you can use the FLIP plugin for free.

From a learning perspective - I might suggest that you start with something a little simpler and work your way to this? Although, throwing yourself in at the deep end is sometimes a fun way to learn.

  • Like 4
  • Thanks 1
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...