Jump to content
Search Community

animation..could you help me?

uavide test
Moderator Tag

Recommended Posts

Hi to everyone, do you know pheraps some codepen with this kind of animation? this is the site:

https://spaincollection.com/

I mean, after the page it's opened and loaded, there are some boxes with image and video on the left and on the right and on the center there is a bigger box with video.

When you scroll, the bigger box with the video, it goes to the top (like 100vh) and after it start to became biger on the left and on the right (like 100%).

Do you know some example like this from codepen?

Many thanks

Davide

Link to comment
Share on other sites

 

A good way to identify how an effect is done, is to open your dev-tools and inspect the page, @uavide.

 

When inspected in dev-tools, you can see that what they are doing is tweening on a clip-path of the parent element of the video.

 

Unbenannt.thumb.png.0ed2acf53da905c97314489aa214c850.png

 

 

 

Sort of like this - a tween on the clip-path being scrubbed through over a certain distance via ScrollTrigger:

 

See the Pen JjZmwRb by akapowl (@akapowl) on CodePen

 

 

 

At the same time they are tweening the images around that video from their initial position towards the edges of the screen. But this mostly will come down to proper layout and CSS-styling to begin with. To get it exactly right you will have to put in some work of your own. Maybe this can serve as a starting point though.

 

For syncing those different individual tweens up on scroll then, you'll probably want to use a timeline instead of the single tween it is in the example above, and match the 'timing' of the individual tweens up on that timeline via the position parameter.

 

Here are some other useful links for understanding how timing works with scrubbed ScrollTriggers and working with clip-paths.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

https://bennettfeely.com/clippy/

 

Happy tweening!

 

Edited by akapowl
Added some more information.
  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@akapowl You are my Herooo!!!!! thank you very much..i really appreciate :)

So it's like a section that has 5 divs, the central div it's the gsap animation, the lateral ones have transform translation css  style.

I saw that they start to automatically translate when the gsap animation start.

I hope to be able to do it for my site (at least something like this) 😄

 

Thanks again

Davide

 

  • Like 1
Link to comment
Share on other sites

16 minutes ago, uavide said:

So it's like a section that has 5 divs, the central div it's the gsap animation, the lateral ones have transform translation css  style.

I saw that they start to automatically translate when the gsap animation start.

 

Those inline transform values you see, are probably also being applied by GSAP (well at least the site is using GSAP 3.5.1, so I suppose they are also using ScrollTrigger for the scroll driven animations), that's how it works as part of the CSSPlugin that is integrated in GSAP's core.

 

E.g. tweening on the x value of an element (as probably neccessary for the images around the center) will apply a transform on the x-axis to that element inline. So you are going to want to animate ALL of them (the part in the center AND the images around) via GSAP/ScrollTrigger.

 

I added some more information above about the use of a timeline and how to sync individual tweens up on scroll, just before you replied - so I'm not sure you've seen it yet. Maybe refresh this thread and have another look. Good luck with the project!

 

  • Like 2
Link to comment
Share on other sites

thank you very much for the help..but for me it's too much :) ...it's amazing to move all the photo but i'm super newbie, so i'm happy with having the side photos move off the screen once I scroll...that's it.
I tried adding the images, but when I scroll they don't move.
How can I do? 

Here the codepen: I'm happy with having the side photos move off the screen once I scroll.
I tried adding the images, but when I scroll they don't move.
How can I do?

See the Pen MWXPRYM by uavide (@uavide) on CodePen

Thanks a lot

Davide

Link to comment
Share on other sites

 

1 hour ago, uavide said:

...it's amazing to move all the photo but i'm super newbie, so i'm happy with having the side photos move off the screen once I scroll...that's it.
I tried adding the images, but when I scroll they don't move.

 

You didn't add any code to move the images, so of course they won't move. Or are you saying that you don't want to animate them to the sides anymore, but only have them move away with scrolling? I'm not sure I understand - could you try and re-phrase please? 

 

One thing I would suggest now that you have wrapped the .outer div in another div, to pin that other div instead of the .outer div in the example of mine, to make sure that the pin-spacing gets applied properly and the section below doesn't get overlapped. 

 

See the Pen MWXzJxZ by akapowl (@akapowl) on CodePen

 

 

 

If you want the images around to keep scrolling though while you pin the center piece, you could probably keep the setup as you had it and just add a margin-top (equal to the distance of the ScrollTrigger's pin) to the section below via CSS to have the layout respect the pinning of the center-piece.

 

See the Pen xxzQqqO by akapowl (@akapowl) on CodePen

 

 

 

Since you say that you are a newbie and this is too much for you, I would suggest not diving in on the deep end. While it may seem intriguing to try and replicate a neat animation you saw on a website, you will not get very far if you don't understand the basics, I've been there myself not too long ago.

 

With regard to ScrollTrigger it might be best to first leave it out completely - just concentrate on the animation you want to achieve. Start with a simple tween (like in my example) - if you want to add some more tweens to be sequenced or synced, move over to a timeline and try and understand how those work. Then when you have the animation itself working as you imagined, move over to adding it to a scrubbing ScrollTrigger.

 

And while in that process you come along any directly GSAP related questions, or problems understanding something, like...

 

I tried to do abc, and thought that xyz would happen, but as you can see in my minimal demo, actually something else is happening - could somebody explain why? 

 

..we will be happy to help.

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

I understand what i mean, If there is someone who helps me and encourages me to learn, also showing me examples (like you) so i can understand how to do it more or less, it becomes important for me and I have more desire to learn.
So I really thank you.
I managed to do what I wanted, (i can't belive)...if you take a look on the left side you see the images go out of the screen when I scroll while the image in the center gets bigger.
Surely there will be errors or adjustments in the code that I created but the effect is a bit like that of the site that I shot as an example.

What do you think?

 

Now i can also try to add a sort of parallax effect to every single image..maybe i'm asking too much to my self :)

With locomotive scroll it's easy to add parallax effect to every element, you have just to add a class to you div in html

The predefined classes comes directly from locomotive scroll...it's easy.

Her you give me a link..i have to check if i will be able.

Thanks

Davide

 

See the Pen MWXzEej by uavide (@uavide) on CodePen

 

 

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