elegantseagulls

I don't think Dropbox allows you to embed images on other sites for bandwidth reasons? It's not meant to be used as a CDN.

CodePen Pro allows Image Uploads. I'd suggest that. Otherwise, if you're just proof-of-concept-ing, unsplash is a good source. Try adding: 'https://source.unsplash.com/random/500x500/?indoors' as your background-image. background-size: cover; (or contain;) will also help, or if you're using images, object-fit

Hi @Odi, I'd bet you'd have better luck if you used the current GSAP3 syntax. You shouldn't need to import css plugin, etc. There's no advantage to using TimelineLite anymore, as it's just an alias in gsap3. All you should need need is to: import gsap from 'gsap'; then for your timeline use: this.Comments = gsap.timeline({ paused: true });

@Breci, It also looks like you're using the old gsap 2.x syntax, and you're importing gsap v3. It's mostly backwards compatible, but for efficiency, and es imports, you may want to convert to the gsap3 syntax. This may help with other issues/confusion down the road too.

Once you have your bars math for heights set, the tween for this would look something like, to animate them up from the bottom: gsap.set(bars, {autoAlpha: 1}) // assuming you set a visibility hidden to prevent fouc. gsap.from(bars, {scaleY: 0, transformOrigin: '50% 100%', stagger: .1})

Hi @supamike, Your code looks good to me. Only thing I see is that you're passing direction into your function and not using it—not a big deal, just noticing. Also, if you're interested, this is pretty easy to do without the waypoints library, using intersection observer api: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

For the pinning/sticky, you'll need to use CSS (position: sticky, as mentioned in your other thread, or toggle a position fixed), and likely JS to do some helping for durations, or position toggling. The rest of your questions should be answered in the examples on this thread. None of the features you're looking for are directly related to GSAP, but are more math/JS concepts. We don't have time here to build specific features for you, but are happy to answer any GSAP-related questions you run into.

I'm not entirely sure what you're asking at this point. I do see that your delay/offset is the same when you add both timelines to scrollTL. Is this intentional? Also, you have a for loop looking for multiple '.sticky' classes on the page when you only have one. Will this be a repeating section on the complete site?

You're only adding one timeline to scrollTL. You'll want to break each animation into its own timeline/tween and add them to scrollTL with the proper delay/offset for their position, which is essentially what the forEach loop is doing in my pen.

You're missing the delay value when adding each timeline to the scrollTL scrollTL.add(tl, sceneStart)

You'll likely want to make this two different timelines, or make a delay relative to the window height to accommodate for positioning. This might be helpful for multiple animations in a single scroll event (each box is its own animation, even though in this case they are the same): https://codepen.io/elegantseagulls/pen/wvapdQd

import React, { useRef, useCallback } from "react"; import { gsap } from "gsap"; import "./styles.css"; export default function App() { const tl = useRef(); const tlr = useRef(); const el = useCallback((node) => { if (!node) return; const squareBlue = node.children[0]; const squareRed = node.children[1]; const squareYellow = node.children[2]; const squareGreen = node.children[3]; tl.current = new gsap.timeline({ paused: true }); tlr.current = new gsap.timeline({ paused: true }); tl.current.to( [squareBlue, squareRed, squareYellow, squareGreen], { y: '50%', duration: 1, stagger: { amount: 0.2 } } ); tlr.current.to( [squareBlue, squareRed, squareYellow, squareGreen], { y: '-50%', duration: 1, stagger: { amount: 0.2 } } ); },[]) // let squaresRef = useRef(null); const animate = e => { if (e.deltaY < 0) { if (!tl.current.isActive()) { console.log('up') tlr.current.invalidate(); tl.current.invalidate(); tl.current.play(0); } } else if (e.deltaY > 0) { if (!tlr.current.isActive()) { console.log('down') tl.current.invalidate(); tlr.current.invalidate(); tlr.current.play(0); } } }; return ( <div className="App" onWheel={animate}> <h1>Just scroll in the window.</h1> <div className="squares" ref={el}> <div className="sq blue" /> <div className="sq red" /> <div className="sq yellow" /> <div className="sq green" /> </div> </div> ); } With the setup above you're just defining each timeline once, in your useCallback function, rather than on each mousewheel event. For this, I had to invalidate, or it'd get a jumpy on direction change. Hope this is helpful. If I have more time later, I'll try to provide more of an explaination.

Hi @LucieB I just had a quick glance, but it looks to me that part of the issue is that you are re-creating the timeline every time you onWheel. You may want to create a ref for your timeline, then set the timeline using useCallback, then use the onWheel to tl.current.play(); the animation.

Hi @neuhaus3000, If you're looking to tie animations to scroll, you may find this article helpful: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

@neuhaus3000 Is this what you're looking for? It's a little hacky, but gets the job done...at least from what I can gather from your wires. https://codepen.io/ryan_labar/pen/BaNPKWP