fantaz

Hi! So I'm trying to code a full screen React slider and I'm having issues with the animation. I want the next slide to slide up OVER the currently active slide, and when the final slide is reached, first slide should again start sliding from the bottom. Honestly I'm not sure which path to take. I thought about manipulating z-indexes; make the current slide's z-index 2, next slide to have z-index 3, previous slide 1... I tried to wait until current animation completes, then translate on the y axis the previous slide to 100%. But to no avail. Here is a link to StackBlitz. That's what i have so far. Thanks for any help.

I added a text slide up animation to the code and made it work so that each appearing line pushes up those before it. Is there a better way to do this? Here's the code once more: const sloganArr = gsap.utils.toArray(".slogan"); const tl = gsap.timeline(); sloganArr.forEach((slogan, i) => { const tl2 = gsap.timeline({ paused: true }); tl2.to(sloganArr.slice(0, i), { y: `-=50`, duration: 1, }); tl.from(slogan, { y: 50, duration: 1, autoAlpha: true, onStart: () => { tl2.play(); }, }); }); Codesandbox is here.

I started working on a project and have encountered an obstacle. I wanted to make a flex div automatically scroll to bottom. Is there a way to pause automatic scrolling if the user scrolls that div using mouse wheel up/down? Is there a way to resume scrolling from current position after a short delay if the user stops scrolling? Here is a minimal demo on codesandbox. Thanks!

yeah, minimal demo is in the first comment

I've changed the code a bit to include changing hamburger menu background color when scrolling over dark sections, but it's not working. What am I missing? useIsomorphicLayoutEffect(() => { let ctx = gsap.context(() => { const logo = logoRef.current; const menu = menuRef.current; tl.current = gsap .timeline() .to(logo, { color: "#ffffff", paused: "true", }) .to(menu.children, { backgroundColor: "#ffffff", paused: "true", }); sections.forEach((section) => { ScrollTrigger.create({ trigger: section, onEnter: () => tl.current.play(), onEnterBack: () => tl.current.play(), onLeave: () => tl.current.reverse(), onLeaveBack: () => tl.current.reverse(), start: "top 70", end: "bottom 85", }); }); }, headerRef); return () => ctx.revert(); }, []);

this makes perfect sense! thank you so much.

Yes, this is it. Any idea why the gsap method isn't working? Maybe because these classes are in different components? gsap.utils.toArray(".dark-section");

Thank you for the welcome I've fixed the link now, don't know how this happened.

Hi! I'm a newbie using gsap and I would like to get some help regarding an issue mentioned in the post title. I wanted to change the logo color when the user scrolls over a section which has class "dark-section", but I can't get it to work. I've seen people using "gsap.utils.toArray('.classname')" method but here it does nothing. Instead, I'm using pure JS "Array.from" method. Does anyone know why this is happening? Scroll Trigger markers are being displayed correctly so I guess that part works. Here's a code sandbox link with my code. Any help is appreciated ❤️