weinde

I have this time line where I am trying to animate "year" events as the line draws out... what happens now is that the line is drawn and then the "years" start apearing... what should I change that the both animations start in the same time and year events start appearing as the line draws out? https://codepen.io/Weindorfer/pen/GRzbOWw

I will try to implement this thing in the morning and let you know! based on your demo it looks exactly what I'm looking for

Hello, I am quite new to GSAP and it's my first time making a bit more complex animation... Well at least I think it is a complex animation ? So what I'm trying to create is an animation that on page load my items would animate from the backpack on top of container so going from opacity 0 and a same fixed position to full visibility and to their own position on grid... for better understanding of what I'm trying to achieve here is an image of the layout after the animation would be finished: so Imagine the items "fly out" of the backpack at top... here is what I managed to achieve so far but I cant make them fly out from a single point.. CodePen

Thank you so much for this.

Hello I'm in need of some help with animating elements on scroll... they keep disapearing when I scroll the page... I want them to scroll up and change opacity from 0 to 1 upon scrolled into view... What am I doing wrong?

Brooo thank you so much!! ?

Hello, I am really new to this GSAP and I am trying to create an animation that triggers when the page loads... what I am trying to achieve is that the smaller text goes from opacity 0 to 1 and "Fades Up" to his position. At the same time I want the SCROLL DOWN indicator to "Fade In" from the left... My object just look like they bounce and they never go from opacity 0 to 1 I hope I explained well enough what I wish to achieve and wouldl ike some help please

Hey, I would like some help with my problem. I'm trying to create a percent counter animation that triggers when that section comes into view... I am for now getting Cannot read properties of undefined (reading 'undefined') error. What am I doing wrong?

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

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?

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

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