Share Posted September 10, 2021 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 More sharing options...
Share Posted September 10, 2021 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 3 Link to comment Share on other sites More sharing options...
Author Share Posted September 10, 2021 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 More sharing options...
Solution Solution Share Posted September 10, 2021 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 5 Link to comment Share on other sites More sharing options...
Author Share Posted September 13, 2021 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 More sharing options...
Share Posted September 13, 2021 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 More sharing options...
Author Share Posted September 17, 2021 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 More sharing options...
Share Posted September 17, 2021 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 5 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now