Jump to content
GreenSock

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

weinde

Members
  • Posts

    4
  • Joined

  • Last visited

About weinde

  • Birthday 06/28/1994

Profile Information

  • Gender
    Male

weinde's Achievements

  1. 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 https://codepen.io/Weindorfer/pen/VwWpoKN
  2. 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?
  3. 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: New Codepen
  4. 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
×