AlexanderGS

I'm trying to make a timeline animation. I want the text and the image to be animated at the same time. I thought about setting the timeline separately for the image. But that breaks the whole animation chain. And the content disappears and falls to the very bottom. Could you please explain how such animation is done? Here is my example

Thanks, but I only need it on gsap.timeline Without CSS. I want to shorten the code, but I don't know how. As I still have very little understanding of gsap.

Hello! Made an animation on the gsap.timeline. Question Is there any way to shorten this chain of animations?

Hello. How do I add a class to another element that is not a trigger from scrollTrigger? For example, the trigger is .content-1, but I need to set a class for .content-2. How do I do this? <div className="content-1"></div> <div className="content-2"></div> let timelineScroll = gsap.timeline({ scrollTrigger: { trigger: ".content-1", start: "100px top", ease: "none", toggleClass: ???, } });

Explained how it works, and even showed an example.😮 Thank you for your help!😄

The line animation starts on the left side, then I specified transformOrigin to make the line go to the right side at the end. But this doesn't happen. Please tell me where I went wrong.

Good afternoon! My scrollTrigger does not see the locomotiveScroll items. I have configured from scrollTrigger.scrollerProxy() documentation to make scrollTrigger and locomotiveScroll compatible. Everything looks fine when scrolling, but the item markers for scrollTrigger scroll along with the site scrolling. Here is my hook, for scrollTrigger and LocomotiveScroll import { useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import LocomotiveScroll from "locomotive-scroll"; gsap.registerPlugin(ScrollTrigger); export function useLocoScroll(start) { useEffect(() => { if (!start) return; const scrollEl = document.querySelector('#main-section'); if (start) { const locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1, lerp: 0.06, class: 'is-reveal', tablet: { smooth: true }, smartphone: { smooth: true, } }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollEl.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.defaults({ scroller: scrollEl }); ScrollTrigger.refresh(); } }, [start]); } I have noticed one interesting behaviour of the scrollTrigger. When I resize the screen, these markers are positioned where they should be, i.e. under my items. I tried to solve this by removing the start argument from useEffect. This seems to solve my problem with the markers, but then the scroller from locomotiveScroll is replaced by the standard browser scroller. How can this be fixed? Example codesandbox

Created an About component as an example. Added a couple of other components (Section, Content are just 'section and div' tags). Prepared useLayoutEffect for animations. But I see that in the end my animation doesn't work, although the elements are there, I console, but the element doesn't react in any way. What could be the problem? I forgot to mention that I use locomotiveScroll for scrolling. Perhaps that's what's causing the problem. I have changed the codesandbox slightly. codesandbox import React, { useEffect, useLayoutEffect } from "react"; import LocomotiveScroll from "locomotive-scroll"; import "locomotive-scroll/src/locomotive-scroll.scss"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import about from "./about.module.scss"; gsap.registerPlugin(ScrollTrigger); export default function App() { useEffect(() => { const scrollEl = document.querySelector("#main-section"); const locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1, lerp: 0.06, class: "is-reveal", tablet: { smooth: true }, smartphone: { smooth: true } }); }, []); useLayoutEffect(() => { let ctx = gsap.context(() => { let timeline = gsap.timeline({ delay: 0.5 }); timeline .from(`.${about.about}`, { scrollTrigger: { trigger: `.${about.about}`, start: "+100px top", end: "bottom bottom", markers: true, scrub: true } }) .from(`.${about.subtitle}`, { scrollTrigger: { trigger: `.${about.about}`, start: "top top", scrub: true, pin: true }, x: 100, opacity: 0.5, duration: 2, delay: 2 }); }); return () => ctx.revert(); }); return ( <div id="main-section"> <section className={about.about} data-scroll-section> <div className={about.about__content}> <h2 className={about.subtitle}>600ds.</h2> </div> </section> </div> ); }

good evening! This may seem like a silly question, but I don't understand why the clip-path isn't animated smoothly

The element has an opacity property that changes from 0 to 1 depending on page scrolling. This is what I mean by that.

Why does transparency work in stages? Instead of going from opacity: 0 to opacity: 1 all at once?

Good evening. Why does the animation work if I haven't even scrolled to the item yet? Maybe I'm missing something for ScrollTrigger?

How to set animation delays for multiple identical elements?

OK, thank you. For some reason I thought the pseudo-elements would trigger as well.

Why does the animation run when the element is not in view of the browser window?