Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
weinde

Scrolltrigger multiple animations of one section with divs

Go to solution Solved by mikel,

Recommended Posts

After a few days of struggling with this I finally decided to post on here for help... I'm trying to create a fullscreen section on my webpage that has a background image that upon being scrolled into view gets an opacity layer over it and after that opacity layer appears the image should become 50% of width (animate from left to right) and from the left side there should slide in a white "box" with text... the opacity, and the white half with text should happen after the image reaches top of webpage and then these animations should happen one after another...

 

My problem is that I don't know how to make these animations apear one after another and the white half with text jumps in relay fast.. it should move depending on user scroll (I tried using the scrub feature of GSAP but I didn't know how to use it corectly to achieve what I want...)

 

P.S this is my first time using GSAP so feel free to correct and point out all the mistakes I made :)

 

Here is a link to a video of the animation made in XD how it is suposed to look like... https://imgur.com/a/xJHKCdS

 

See the Pen gORmLjz by Weindorfer (@Weindorfer) on CodePen

Link to comment
Share on other sites

Hey WEINDE,

 

Welcome to the GreenSock Forum.

 

This could be an option if I interpret you correctly.

 

See the Pen eYRvXKg by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 3
Link to comment
Share on other sites

3 hours ago, mikel said:

Hey WEINDE,

 

Welcome to the GreenSock Forum.

 

This could be an option if I interpret you correctly.

 

 

 

 

Happy tweening ...

Mikel

 

Hey Mikel,

 

Thanks for your help, it helped me get some progress but now I have some weird bug... the sections are behaving very strange... they are jumping and the animation on the third section doesn't finish...

And one more question... section two and three have same classes inside... could this be an issue? do I have to trigger them seperattelly?

 

Here is my new codepen:

   

See the Pen VwWpoKN by Weindorfer (@Weindorfer) on CodePen

 

 

Link to comment
Share on other sites

  • Solution

 

Hey Weinde,

 

You can define the relevant objects for a loop.
Then this is how it works

 

See the Pen XWgMvGy?editors=1010 by mikeK (@mikeK) on CodePen

 

Does that help?

Mikel

 

 

  • Like 5
Link to comment
Share on other sites

On 9/10/2021 at 2:37 PM, mikel said:

 

Hey Weinde,

 

You can define the relevant objects for a loop.
Then this is how it works

 

 

 

 

Does that help?

Mikel

 

 

Thank you, this is realy great! :)

Now all that is missing is the layered pinning efect.. if zou know what I mean? Its like a paralax efect.

Also is it possible to add a div with white background that has 0 opacity and when the image reaches its top position the opacity increases to 0.3?

Link to comment
Share on other sites

 

Hey WEINDE,

 

A lot is possible.
Try to take the first steps for this yourself.

 

Happy tweening ...

Mikel

Link to comment
Share on other sites

On 9/13/2021 at 11:29 AM, mikel said:

 

Hey WEINDE,

 

A lot is possible.
Try to take the first steps for this yourself.

 

Happy tweening ...

Mikel

Thank you so far Mikel.

 

I have applied all of your sugestions to my code and I almost got the result I wanted... my only problem now is that I am experiencing an issue with the order of animations? How can i order the animations that happen in the order I want them to happen...

My desired order is:
1) Image reaches top of page

2) The opacity layer cover the image with opacity 0.5

3) The white half starts sliding in and the image starts moving to the right

4) the text objects start sliding in...

 

I have tried applying pauses and even tried creating two different timelines...  I have been unsucessfull... and would require more help

See the Pen VwWpoKN by Weindorfer (@Weindorfer) on CodePen

 

Link to comment
Share on other sites

 

Hey WEINDE,

 

Try to build up the animation piece by piece, step by step.
Take a close look at the positioning options (Positioning animations in a timeline).
Then build the tweens: order, timings, distances, overlaps ...

 

See the Pen XWgMvGy?editors=1010 by mikeK (@mikeK) on CodePen

 

And then integrate the scroll trigger.

 

Happy scrolling ...

Mikel

  • Like 5
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.
×