JPM82

Thanks for this @mvaneijgen. Now that I'm come this far I have one more question (sorry for keep moving the goal post!). I've added new section with a background color just below the pinned sections. I'd like to change the background color of that section to match each revealed section. I've been playing around triggering functions on scroll, but I can only get it to fire when the at the trigger. Is there a way to do the function each time a pinned section is revealed? And if so, how can I get the background color attribute of that section? Thanks again!

Hi @mvaneijgen - thanks for the response. I've been looking through the demos and I think I've got it much closer to a place I'm happy with. I've updated the code pen to show you. The only bit I can't seem to figure out is the space that appears above the pinned sections and the "header" (the big solid green block). If you view the pen on a full screen you can see what I'm referring to. I've tried using the pinSpacing : false setting, but that doesn't fix the issue. How can I get rid of the space that opens up between the header and pinned sections? Is that a gsap thing or simply a css thing?

I'm trying to create a section reveal that has multiple sections within. I would like to pin when it is centered, and loop through each section with an animated reveal (a simple opacity transition will do just fine), and then continue on with the rest of the page. Something similar to this https://codepen.io/GreenSock/pen/BaowPwo, but ideally I'm imagining each section be revealed from behind - sort of replacing each existing section. Also I'd like each section not be 100vh. I've tried using the above link as a starting place, but couldn't get what I'm envisioning to work. I've included a very crude codepen to try to demonstrate what I'm thinking. I hope I'm explaining this well enough. How can I make this happen?

Hey Cassie - yes that helps a ton! I am having a little trouble understanding all of what's going on here (mostly in the LottieScrollTrigger function), but I think I can work with it. Are there docs that explain it, or this a custom function? Mainly, I would like my ".animation" lotties to loop while in the viewport. I tried adding some parameters (loop: true/false) to the scrolltrigger like you did with the duration, but that didn't work. I've updated my Codepen so you can see what I was trying to do there. Is there a way to do that as well? Either way this was extremely helpful. Thank you so much!!

Thank you, yes that helps. However I'm thinking this may be a bit much for what I'm looking for. I've added a basic reconstruction (albeit silly) of what I'm trying to achieve as a codepen. There are two different kinds of animations here: one that plays when the user scrolls in and out of the view port, and the other that play only once when coming into the viewport. As it is right now, the playOnce animations to only play once, but they play as soon as the page loads, not onEnter. The other animations are just playing all the time, not onEnter or onEnterBack. Does this help demonstrate what I'm going for?

It looks like the animation is tied to the scroll position in this example. I just want the animation to trigger when the scroll hits a certain point, similar to the way it would in basic scroll trigger example.

I'm trying to trigger some lottie animations using scroll trigger. What I was hoping for is that the animations would trigger when coming into view, but when I look in the inspector it seems they are running constantly. The animations that are 'playOnce" I want to trigger when scrolled into view, but only once. What am I missing in here? //Regsiter Scroll Trigger gsap.registerPlugin(ScrollTrigger); const animation = document.getElementsByClassName("animation"); Array.prototype.forEach.call(animation, icon => { let anim = bodymovin.loadAnimation({ container: icon, path: icon.dataset.json, renderer: "svg", loop: true, class: "svg", autoplay: false }); ScrollTrigger.create({ trigger: animation, onEnter: anim.play(), onEnterBack: anim.play() }); }); const playOnce = document.getElementsByClassName("animation--once"); console.log(playOnce); Array.prototype.forEach.call(playOnce, once => { let onceAnim = bodymovin.loadAnimation({ container: once, path: once.dataset.json, renderer: "svg", loop: false, class: "svg", autoplay: false }); ScrollTrigger.create({ trigger: playOnce, onEnter: onceAnim.play() }); });

Doing some animations for my hero/nav section. Everything works fine in my Hero component, but for some reason not working in the Nav component. I keep getting this error: " Invalid property opacity set to 1 Missing plugin? gsap.registerPlugin()" . This is my code for the Nav component: import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import "./index.scss"; import { ReactComponent as Logo } from "../../assets/images/logo_white.svg"; import { NavLink } from "react-router-dom"; import { Link } from "react-scroll"; const Nav = () => { const navItem = useRef(); const navTl = gsap.timeline({ defaults: { ease: "power4.out", duration: 1.2 }, }); useEffect(() => { navTl.to( navItem.current, { opacity: 1, stagger: { each: 0.3, }, }, "nav" ); }, [navTl]); return ( <nav> <div className="nav-bar"> <div className="nav-bar__inner"> <NavLink to="/" ref={navItem} className="nav-link"> <Logo /> </NavLink> <div className="nav-links"> <ul> <Link ref={navItem} className="nav-link" to="about" spy={true} smooth={true} duration={500} > About </Link> <Link ref={navItem} className="nav-link" to="work" spy={true} smooth={true} duration={500} > Work </Link> <Link ref={navItem} className="nav-link" to="contact" spy={true} smooth={true} duration={500} > Contact </Link> </ul> </div> </div> </div> </nav> ); }; export default Nav; Not sure what's going on here. I've configured it the same as my other component which works just fine. Am I missing something here???

I have an opening sequence in my hero section I've declared as homeHeroTl. I want all other animations to be paused while this plays, and then unpause when it's finished. I can't figure out how to do this! The following section is fairly simple : each element animates in as the user scrolls. The problem I'm running into is that on mobile, where both sections are visible, the second section will start to animate. I want the animation to wait until the homeHeroTl has finished. How can I do this? Here is my code: //Regsiter Scroll Trigger gsap.registerPlugin(ScrollTrigger); let homeContent = document.querySelectorAll(".home__content"); if (homeContent.length > 0) { homeContent = homeContent[0].children; } console.clear(); const heroHomeTl = gsap.timeline({ defaults: { ease: "ease: expo.out" }, }); heroHomeTl .to("html", { overflowY: "hidden" }) .to(".hero--home__overlay h2", { opacity: 0.85, duration: 1, }) .fromTo( ".hero--home", { ease: "power2.in", "clip-path": "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)", }, { duration: 1.2, ease: "power2.in", "clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", }, "first" ) .to( ".hero--home__kicker", { "clip-path": "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)", x: 0, duration: 1, }, "first+=.8" ) .to( ".hero--home__headline", { "clip-path": "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)", x: 0, duration: 1, }, "first+=1.1" ) .to("html", { overflowY: "visible" }); console.clear(); Array.from(homeContent).forEach(function (item, i) { item.classList.add("home-item"); ScrollTrigger.batch(".home-item", { ease: "back.out", onEnter: (elements, triggers) => { gsap.to(elements, { visibility: "visible", x: 0, stagger: 0.35 }); }, }); const teamImg = gsap.timeline({ scrollTrigger: { trigger: ".team", start: "top center+=40%", }, defaults: { ease: "back.out", duration: 1 }, }); teamImg.to( ".team", { visibility: "visible", y: 0, }, "" ); }); console.clear(); I didn'

@OSUblakeI'm using Chrome. I'm fairly certain the clipPath is animating all the way. I think it may be something more than the gsap library here. Im logging my window Y & X offsets when I refresh the page and they're all over the place, which is why I think it appears the animations aren't' completing even when they are.

@OSUblake Ok, I just added a crude demo but it does the trick. The red and blue sections beneath are just for context. I haven't been able to reproduce the bug in the pen however. Also, I wanted to get the offset image to scroll with a little with page. I'm using vanilla js for this now, but wondering if gsap can help with this? Like pin it for 100px or something???

@OSUblake Yes I certainly can! I just thought I'd check first to see if this is a common thing. I'll post a minimal demo as soon as I can.

Every so often my animations will not load all the way. What usually happens is that the width of the page will only load to about 60-80%. Does anyone know what could cause this? I'm wondering if it has something to do with the loading (???). Still pretty to new to GSAP so it's likely I'm not using something correctly.

Is there a way to create triggers for each element in a timeline? I'm still till learning how to use gsap most efficiently. I've been using timelines to create my animations, but I want them to trigger at the right time, not just happen one after the other. Sometimes this is what I want, but when there is a lot of content, I'd like the elements to appear as the user scrolls. Can I do this within my timeline??? I've been using the relative timing function so far. Here is an example: const serviceContent = document.querySelector(".service-page-content"); const overviewTl = gsap.timeline({ scrollTrigger: { trigger: serviceContent, start: "top center+=50%", }, defaults: { ease: "", duration: 2 }, }); overviewTl .to( ".services--kicker", 1.5, { y: 0, opacity: 1, }, "kicker" ) .to( ".services--list li", 0.5, { x: 0, opacity: 1, duration: 0.5, stagger: { each: 0.1, onComplete: function () { gsap.to(this.targets()[0], { "--bullet-opacity": 1, "--bullet-translate": 0, }); }, }, }, "kicker+=1.1" ) .to( ".services--header", 0.5, { y: 0, opacity: 1, }, "kicker+=.5" ) .to( ".services--copy", 0.5, { y: 0, opacity: 1, }, "kicker+=.9" ) .to( ".badge", 0.4, { opacity: 1, y: 0, stagger: { each: 0.1, }, }, "<" );

@AnurellaThis would work perfectly, but it doesn't seem like the mix-blend-mode properties can be adjusted to a certain color. The 'black' in the real project is a dark grey.