Jump to content
GreenSock

sparks

ShockinglyGreen
  • Posts

    3
  • Joined

  • Last visited

About sparks

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

sparks's Achievements

  1. Hi everyone, I'm pretty new to GSAP but really love it so far and was able to make some cool animations with it! Now I'm facing something I can't grasp on how to build yet and would appreciate any help with that to guide me on the right path. I try to explain what I want to do: I have a "container" div in which I have several "slide" divs. Each of the "slide" divs contain three texts (small headline, big headline and description). When the main "container" comes into view (with ScrollTrigger) and has come to the middle of the screen (based on its height), I'd like the first "slide" div to show up. But it shouldn't just show up or fade in. As I keep scrolling, the "bigHeadline" should appear in 400px font-size (fade In), when I continue scrolling it should scale down until it reaches the position in my CodePen. As soon as it reaches that position / size, it stays like that. When I continue scrolling, the "smallHeadline" and "description" show up. They both can Fade In or whatever. After everything is visible, and I keep scrolling, I want it to stay on the screen for a few seconds / frames and then fade out. When I then continue scrolling, it should do the same with the next available "slide" div. Once it reaches the last "slide" div and played the animation for it, it shouldn't do anything else. If I scroll up from that position, everything should reverse. I hope I was able to explain it as simple as possible. I've attached a CodePen, so you can better see the structure. The main problem is, that I don't know where to start or how to assemble this. I'd start with building the animation for each element with a ScrollTrigger and scrub, I guess? But how do I "chain" all the other "slide" divs to that? Edit: I'm also using your SmoothScroll function on the page if that is maybe important to know. Really appreciate any help with this. Thanks a lot.
  2. That did the trick. Thank you very much! For any other one having the same problem: I only used gsap.to(...) instead of gsap.fromTo(...)
  3. Hi there, I'm pretty new to GSAP and love it so far. I only have one problem to which I can't find a solution. I'm usign GSAP together with WordPress and Elementor. When I add a ScrollTrigger Animation for an Element that should Fade In on Scroll, it works absolutely fine in the browser. Since I have to set the opacity of the Element to 0 via CSS, the Element won't be visible in the Backend-Editor of Elementor. This makes it hard to use both together. Is there any workaround I'm not seeing? I tried to find body classes that are only available in the final page and not in the backend editor, so I can set the elements to opacity 0 only there. I hope my question makes sense.. Thanks in advance!
×