edmundsecho

I have what I need. Thank you.

Solution One of elements had a height that was 200vh. Prior to my using this amazing library, it made sense to work the effects I was after. So, to ensure the scroll duration aligns with the elements in the intro, make sure the heights don't include extra space if that's not intended (obvious :)). Summary Conceptually, to align the end +=SomeDistance with the intro elements, greensock does that for you "auto-magically": setting the height to the sum of the elements in the intro setting bottom padding value to the +=SomeAmountpx ... the computed height value depends on the height of each element.

This is an extended scenario described in this recent post: Extended scenario Say you have content you want the user to scroll "normally" following the animation in this post. So, once the scrollTrigger content "comes and goes" during the active period of the scrollTrigger, you have more content. Said differently, the elements included in the scrollTrigger animation serve to introduce the "normal" content. It may be documented elsewhere, but in my experience extending the scrollTrigger by +=SomeAmount does not seem to work if I don't somehow adjust the size of the "scrollTrigger elements" in such a way that they consume the extra distance. The question Is there a best practice for how to align the size of the "scrollTrigger elements" with the scrollTrigger.end += SomeAmount? Partial answer Setting the pin attribute of the scrollTrigger will have greenSock add a wrapping <div class="pin-spacer pin-spacer-intro-scene"> with a style setting padding: 0px 0px SomeAmoutpx, the scrollTrigger duration (where time ~ distance). The answer is only partial because my current animation has empty space the user needs to scroll through before hitting the elements outside of the wrapped content.

This is a helpful post. I moved my follow-up question to a new post.

I have seem this webpage feature referred to as a "scroll to top button". So, it's a button that appears once the user scrolls down the page. To get the button to appear I'm using a scrollTrigger. The focus of this post is how to animate the page "scrolling to the top". Is there a way to use gsap to do so? I would use an easing function to provide a nice user experience. As of now, using vanilla JS, it races to the top. Thank you.

Your observation is spot-on. I did not understand how the timelineS would be derived when ultimately set by the user scrolling for whatever "space" exists between the start and end of the scrollTrigger. The 2 lines of code provided was the missing ingredient. Thank you!!

Thank you for your input. I've made some good progress using a series of nested timelines. I believe there is one missing understanding on my part. Here is a code pen link to the situation (the console prints out what is going on including the "bug"). I understand how to get two timelines to run in parallel using the timeline().add(tlA).add(tlB, "<") syntax. I also know that to have each *end* together, that the duration values need to be the same. However, what if the duration is set using a scrollTrigger?... per the following: gsap .timeline({ scrollTrigger: { trigger: "#header-trigger", start: "top top", end: "+=900", scrub: 1, markers: true, onEnter: () => console.log("header-enter"), onLeave: () => console.log("header-leave"), id: "intro-scene", }, }) .add(master) .add(zoomOut, "<"); ... is it really a matter of setting the trigger to a const to then reference the trigger in *both* the master and zoomOut timelines, separately? What's a little confusing here is that the master timeline clearly takes on the length of however long it takes to scroll 900px, what prevents the zoomOut from doing the same? ... or is this where the scrollTrigger.batch() comes in handy? PS: Apologies for not getting this up and running in code pen, I'm just not that efficient as of yet.

I'm new to GreenSock and combining/coordinating animations. gsap is a pleasure to work with; I've been really productive with "one-off" animations with and without using ScrollTrigger. The elements I have 3 elements (img and svg), all set to the same size, positioned on top of each other on the same location on the screen. Two of them start at a large 4x scale. One of the elements is visible at scale 1 to start. While the user scrolls for 900px, the following is to take place, "in place" (i.e., scrolling drives the animation using scrub, but does not appear to scroll per se). The task I'm after the following, in place: v ~~~~~~ scrolling 900px ~~~~~~~~~~~~v ------- hide element 1 ---------------------------------------------------- scale down to 1 elements 2 & 3 --------- show element 2 (a svg) ----------- run the svg animation ---------- hide element 2 ------------- show element 3 Code thus far The scroll trigger... gsap .timeline({ scrollTrigger: { trigger: "#header-trigger", start: "top top", end: "+=900", scrub: 1, markers: true, onEnter: () => console.log("header-enter"), onLeave: () => console.log("header-leave"), id: "intro", }, }) .to(".element-1", { opacity: 0, }) ... and the animation for element-2 (a svg) const element2Animation = gsap .timeline() .from(".top-box", { y: -1000 }, 0) .from(".bottom-box", { x: 1000 }, 0) .from(".right-box", { x: -1000 }, 0) .from(".left-box", { y: 1000 }, 0) .from(".context-box", { autoAlpha: 0 }) .from(".grid", { autoAlpha: 0 }); I'm stuck on how to add to the timeline that enables a combination of sequence (e.g., change scale of elements 2 & 3 following my taking element 1 opacity to 0) and "in parallel" with animations that run together (scale both elements 2 & 3) while running the show/hide sequence of the elements. Thank you in advance to anyone with guidance on how to think through this. - E

Thank you. Placing the `scrollTrigger` inside the `timeline` configuration was the issue. Thank you very much.

I'm a new user. Great work to you all! I have the animation working in css by setting the animation property. I also have other html/css elements animating with the ScrollTrigger plugin. So, I get the basics. Here is the code that does not seem to work: The css ```css .link { stroke: #ffffff; stroke-opacity: 0.8; stroke-dasharray: 1000; /* make longer than line */ stroke-dashoffset: 1000; stroke-width: 1; /* animation: link-animation 1s linear forwards; */ fill: none; } /* not utilized (later will include as backup animation per the GreenSock docs?) */ @keyframes link-animation { to { stroke-dashoffset: 0; } } ``` The js ```js gsap .timeline() .to(".link", { scrollTrigger: { trigger: "#action-inventory", start: "center center", toggleActions: "restart none none restart", markers: true, onEnter: () => console.log("enter"), onLeave: () => console.log("leave"), id: "act-inventory", }, strokeDashoffset: 0, duration: 3, }); ``` and the html ```html <svg class="inventory-svg" height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="100 0 900 940"> <defs> <filter id="blurr" x="-20" y="-20" width="100" height="100"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <g id="list-item" class="list-item"> <path stroke-width="8" d="m6.79 6.146 19.543 9.771L6.79 25.689V6.146Z" /> <path stroke-width="19" d="M55.703 15.917H163.19" /> </g> <symbol id="file-icon" class="file-icon"> <title>File icon</title> <svg width="98.3" height="114.4" viewBox="0 0 98.3 114.4"> <path d="M1 1h81l13 13 1 98H1V1Z" fill="var(--fill-color)" fill-opacity="var(--fill-opacity)" stroke="var(--stroke)" stroke-width="var(--stroke-width)" stroke-opacity="var(--stroke-opacity)" opacity="var(--opacity)" /> </svg> </symbol> </defs> <!-- drawing --> <g id="links"> <g id="link-1"> <path class="link" id="path-link-1" d="M465.63+545.095L574.015+543.531L793.719+762.672L815+762.538" /> </g> <g id="link-2"> <path class="link" id="path-link-2" d="M220.154+362.592L470.094+363.045L790.898+701L815+700.79" /> </g> <circle class="pulsate" cx="-5" cy="0" r="5"> <animateMotion begin="3s" dur="6s" repeatCount="indefinite" rotate="auto"> <mpath href="#path-link-2" /> </animateMotion> <animateTransform attributeName="transform" begin="2s" calcMode="linear" type="scale" values="0;0.2;1;0.2;0" dur="3.5s" repeatCount="indefinite" /> </circle> </g> </g> </svg> ``` The scroll triggers are activated per the log to the console. The class name and css attribute spelling and capitalization seems right. ### Is there something I'm missing that has gsap find the elements with the ".link" class to then change their `strokeDashoffset: 0`? Thank you! (Note: I can return shortly to put the code into codepen)