Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scrolltriger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Firstly, thank you team (and others) for your quick replies. The codepen tutorial was a lifesaver. Here's my issue: I'm trying to make a puk decomposition on scroll similar to the glock demo. https://codepen.io/GreenSock/pen/MWaWPmG I have the animation working https://codepen.io/Designgeekstudio/pen/eYEWyya but when I apply scrub: "true". I have no control and the tweeting and easing goes away. https://codepen.io/Designgeekstudio/pen/KKvmZQr
  2. As i was using the angular 12 to build the webapp i'm trying to use the scroll trigger animation in my project, the thing is the initial animation is working fine. But when it comes to ScrollTrigger in doesn't works in angular. I dont know why... I want to target a particular class in HTML to animate it using the scrolltrigger plugin
  3. hi all, I am trying to add animation to carousel. I am using ngx-slick-carousel for carousel. All animations are working fine but one. when i am swiping the slide, the animation is not taking effect. Animation is working pretty well before and after swipe complete. I want animation to be done while swiping. here is the code: let cards = currentCardBox.querySelectorAll('.card-body') let slideNum = e.currentSlide gsap.to(cards[slideNum+1], { scaleY:1.5, scrollTrigger: { trigger: cards[slideNum], start: 'left 30%', end: "-=100", scrub: true, horizontal: true, markers: true }, }); Q : What I am trying to achieve ? Ans: when the hero card swipes to left, next to hero card become hero card with some animation. Thanks for the help..
  4. In the pen the height of the header is updated on scroll, but the value for end stays the same.(I coloured the header so you can see it better that the end value is not at the bottom of the header after it changed height). How can I update the end value constatly so this does not happen? (I hope you can understand what I mean)
  5. Hi guys! I come humbly in front of you with few drops of hope left, after 5 full days of switching between possible solutions to get a consistent ScrollTrigger behavior on a Gatsby site. Getting directly to you is my last resort, as every google and gsap forum link regarding ScrollTrigger and Gatsby is already visited. 😒 I cannot get a CodePen reproducing the exact issue so I'll try my best to describe it here. Shortly, the problem seems to be, as I suspect, that the ScrollTrigger does not refresh itself when Javascript pops into the browser on top of the SSR-ed html/css bundle. Here's what i did. I created several projects with different versions for dependencies, but i will stick to the simplest one with all dependencies up to date.It's a gatsby with material-ui plugin added, who's exact structure can be found here: https://github.com/mui-org/material-ui/tree/master/examples/gatsby There are no other plugins added, nor any other configs/plugins changed. I rendered the component that will contain the ScrollTrigger (AboutBlock) in the AboutPage page: about.js const AboutPage = () => { return ( <AboutBlock /> ) } export default AboutPage This is the component where i try to animate some elements on reveal when scrolled into view: aboutBlock.js import gsap from "gsap"; import ScrollTrigger from 'gsap/ScrollTrigger'; import animateReveal from "./gs_reveal"; export default function AboutBlock() { gsap.registerPlugin(ScrollTrigger) const revealRefs = useRef([]) revealRefs.current = [] useLayoutEffect(() => { let scrollTriggers = [] scrollTriggers = animateReveal(revealRefs.current) return () => { scrollTriggers.forEach(t => t.kill(true)) } }, []); const addToRevealRefs = el => { if (el && !revealRefs.current.includes(el)) { revealRefs.current.push(el); } }; return ( <Grid container> <Grid item width={{ xs: '100%', sm: '80%', md: '35%' }} pl={{ xs: 0, md: '2.5%' }} mt={{ xs: 60, sm: 0 }}> <Grid container direction="column" alignItems={{ xs: "flex-start", sm: "flex-end" }}> <Grid item mt={{ xs: 0, md: '10vh' }} id="acum"> <Typography variant="h5" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> NOW WE ARE IN </Typography> </Grid> <Grid item> <Typography variant="h6" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> LOCATION </Typography> </Grid> <Grid item mt="10vh" id="hi"> <Typography variant="h5" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> SAY HI </Typography> </Grid> <Grid item className='toughts'> <Typography variant="h6" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> TELL US YOUR THOUGHTS </Typography> </Grid> </Grid> </Grid> </Grid> } HTML is longer and crowded, I left a part to get the idea of the structure and styling approach (MUI's sx - emotion). And finally, this is the animateReveal function: gs_reveal.js import ScrollTrigger from 'gsap/ScrollTrigger'; import gsap from 'gsap'; export default function animateReveal(elements) { const triggers = [] elements.forEach(function (elem) { hide(elem) let tr = ScrollTrigger.create({ trigger: elem, id: elem.id, end: 'bottom top', markers: true, onEnter: function () { animateFrom(elem) }, onEnterBack: function () { animateFrom(elem, -1) }, onLeave: function () { hide(elem) } }); triggers.push(tr) }); return triggers; } function animateFrom(elem, direction) { direction = direction || 1; let x = 0, y = direction * 100; if (elem.classList.contains("gs_reveal_fromLeft")) { x = -100; y = 0; } else if (elem.classList.contains("gs_reveal_fromRight")) { x = 100; y = 0; } else if (elem.classList.contains("gs_reveal_fromBelow")) { y = -100 } elem.style.transform = "translate(" + x + "px, " + y + "px)"; elem.style.opacity = "0"; gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, { duration: 1.25, x: 0, y: 0, autoAlpha: 1, ease: "expo", overwrite: "auto", delay: elem.classList.contains("gs_delay") ? 0.3 : 0, }); } function hide(elem) { gsap.set(elem, { autoAlpha: 0 }); } The ScrollTrigger markers are misplaced when page loads, and might move (get more misplaced) on hard reloading page, depending on the current scroll position in the moment of reloading, even though the scroll position is not preserved on reload (always is scrolled on top). - The markers are placed on the correct position on resizing, as expected. I followed gsap official docs on react and react-advanced and tried: grabbing the html elements to animate on scroll inside animateReveal() by let elements = gsap.utils.toArray(".gs_reveal"); Assigning to each element a useRef() and use the .current value for each in animateReveal() grabbing html elements using gsap's selector utility gsap.utils.selector changing to simpler animation on scroll, like just a fade refreshing ScrollTrigger in different moments useLayoutEffect(() => { ScrollTrigger.refresh(true) // or ScrollTrigger.refresh() ... }, []); 6. Lifting ScrollTrigger logic to parent about.js page 7. Assigning scrollTrigger to a timeline triggered by the to-be-reveal element 8. Use useEffect() instead of useLayoutEffect() (recommended anyway for ScrollTrigger) 7. Other who-knows-what unsuccessful twists. I suspected a rehydration error, when the static generated code does not match the client side one. But the only JS that could cause a mismatch is the gsap related one, and it does not seem an SSR issue. I checked if the CSS and HTML elements are being properly SSR-ed, by preventing JS from running in the browser. All looking fine. This is both a SSR issue (gatsby build) and a development issue (no SSR). As i said on point 5, setting a ScrollTrigger.refresh() when component is mounted does not work, but delaying this with a 1-2 seconds in a setTimeout successfully solves the issue useLayoutEffect(() => { setTimeout(() => { ScrollTrigger.refresh(true) }, 2000); }, []); This is hard to be accepted as a solution, since i cannot rely on a fixed value to 'guess' when DOM is properly rendered in the eyes of the ScrollTrigger, not to mention the glitches that might occur. So, the question is 'WHY?', why animating with ScrollTrigger from within useLayoutEffect, which is not triggered on the server anyway and should mark the 'component is successfully mounted' moment, seems to not wait for the DOM being completely painted, even though nothing is generated dynamically! There are quite of threads on this forum regarding gatsby, and none seemed to have a clear cause-outcome-solution. Is this battle lost, should i move on? Do you have any suggestions? Thanks so much for your time reading this, it means so much to me!
  6. hello great community, am a freelance nature and documentary photographer!! web animation is always my passion to watch, and am trying to learn something, and completely new to GSAP world, yesterday have started experimenting and examples are really inspire to learn. Yesterday i learn horizontal scrolling. here in this example, i am trying to achieve image comparison inside a horizontal scrolling section, -> where sections ended in the mid of animation and quickly jump to next section!! help me to complete image comparison first, then scroll to next section. And from tween for a titles and text is not working..... and i need suggestion to slow and smooth scroll in-between sections, have tried many as possible, but its not happening with me,,
  7. Hi, I'm back at it again and need some help understanding what is going wrong. I want my scrollTrigger to only be active on mobile devices. Thus, I created the scrollTrigger animation within a media query. As I understand the documentation my implementation should work but it obviously doesn't 🙃 I'm having trouble understanding where I'm going wrong this time ://
  8. Hi, I am trying to accomplish this animation using scrolltrigger, but there is some weird space below the first section. I added pinSpacer: false and now, weird space is gone but second section is going beneath the first section. I dont what that to happen.. thanks
  9. Hello everyone, I'm facing problem in creating this effect in horizontal scroll. https://codepen.io/eighthday/pen/MKqBjX I want to create this same effect for my page reveal but I want my sections to scroll horizontally and then my whole website will be vertical. I tried by changing the "top" with "left" in js but it didn't work as expected. The problem might be in my approach with horizontal scroll as xPercent is transforming whole section and I can't fix the position of start logo. This is what I did. https://codepen.io/aniketbamotra/pen/wvJrNjr PS. I'm new to web development and this is my first time using gsap so help me with this. Thanks in advance
  10. Hi there! Thanks a lot first for creating this library! I am only starting to using it more often but love how easy it can make powerful, performant transitions. This is my first time using ScrollTrigger however and I am unsure how to use it in a good way for my use case. I've spent a few hours on trying to put this together but did not get it fully working and hope that some of you can guide me in the right direction. What I am trying to achieve Once Section Two ('section .two') reaches the middle of the viewport it should be pinned. After that the text elements on the right of Section Two ('.stepped-animation .single-step') should fade in / out one after another when I scroll further. There should be a "direct" transition to the next text element, meaning for example it shouldn't stop during animation at opacity 0.5 of a text element (I tried to achieve this using snap). The last one should stay visible when I scroll on. After the last text element is shown and the user scrolls further the Section Two should be unpinned and it should scroll on further to the next section (no need to snap to the next section, just go on). What I could do so far As you can see in the codepen I've somehow got it to work, but: I've manually added the transitions for the text elements and durations (see stepsTimeline) which is not a plausible way The number of text elements can vary. Somehow the whole Section Two now also snaps in place, which is not really what I intend. It should just normaly scroll into place until it is pinned without the snapping. Less important, maybe a second question: I would like to get rid of the white space above / below the pinned section but also do not want the following content to go under the pinned section (what happens when I disable pinSpacing). A few thoughts on how I tried to achieve the solution Two scroll triggers: - one that pins / unpins the Section Two - one that goes through the text elements and shows / hides then when the time is right I feel like there is probably a better way on how to setup the whole thing and maybe use ScrollTrigger it in another way combined with timeline - but I cannot see it 😓 Thanks for any help! Aaron
  11. I have a Next.js/React project with typescript and Storybook: when using Scrolltrigger.matchmedia() function the component always give an error when running inside Storybook: _win is undefined matchMedia@http://localhost:6006/vendors~main.d3f7aa1f55228e485314.hot-update.js:1541:10 Removing matchmedia it all works as expected, but I need it in the project, this is very upsetting... You can find the demo code here on github: https://github.com/marcello-palmitessa/gsap-scrolltrigger-issues-demo
  12. Hello Dear members of this forum can i please ask for a little guidance. I want to combine three.js and gsap/scrollTrigger. My page structure is simple: two sections both with height: 100vh First section is simple hero baner that is not containing any animation (not relevant for the issue) and the second section is a place when magic should happen. I animating three.js model as soon as the second section hits the viewport and I did it by absolute postioning inside relative parent, creating a timeline with all the changes to model (rotation, scale, lighting, camera movment) and connect it all with scroll trigger (using "pin" propery) and this works like charm. Since I cant use codepen i will paste code here (so sorry) js: const timeline = gsap.timeline({ scrollTrigger: { trigger: ".scene-wrapper", start: "top", scrub: 1, pin: true } }); timeline .to(ambientLight, {intensity: 4, duration: 0.4}, 'scene1') .to(mainLight, {intensity: 5, duration: 0.4}, 'scene1') .to(model.rotation, {y: -Math.PI / 2, duration: 4}, 'scene2') .to(model.position, {x: 0, duration: 3}, 'scene2') .to(camera.position, {y: 0, duration: 3}, 'scene2') .to(camera.position, {z: 4, duration: 2.5}, 'scene3') .to(model.rotation, {z: -0.8, duration: 3}, 'scene3') .to(model.rotation, {y: -2.6, duration: 3}, 'scene3') .to(model.rotation, {z: 0, duration: 3}, 'scene4') .to(model.rotation, {y: -3.1, duration: 3}, 'scene4') .to(camera.position, {y: 0.4, duration: 3}, 'scene4') .to(camera.position, {z: 6, duration: 3}, 'scene4') html: <div class="wrapper"> <div class="section one"> <h1>Funny stuff</h1> </div> <div class="section two scene-wrapper"> <div class="background-container"> <div class="animation-container"></div> </div> <div class="scroll-container"> <section class="scene-1 scene"> <div class="copy-wrapper"> <h2 class="headline">This is 3D Model approach</h2> <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> </div> </section> <section class="scene-2 scene"> <div class="content-column"> <div class="copy-wrapper"> <h2 class="headline">Scene 2</h2> <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> </div> </div> <div class="content-column"> </div> </section> <section class="scene-3 scene"> <div class="copy-wrapper"> <div class="content-column"> </div> <div class="content-column"> <div class="copy-wrapper"> <h2 class="headline">Scene 3</h2> <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> </div> </div> </div> </section> <section class="scene-4 scene"> <div class="copy-wrapper"> <h2 class="headline">Scene 4</h2> <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> </div> </section> </div> </div> </div> As you can see inside ".scene-wrapper" i have container for aniamtion AND for 4 sections that i called scenes. My model is pined to a container and stays always on top of the screen (thats desired behaviour) but now i want to hide ans show this 4 texts from the "scens" in particular moments of my aniamtion and I dont know how to approach this.... So question to you dear forum: 1. Should I add animations of each text to the created timeline and create even longer timeline that i have right now or create separate timeline for text ? 2. Do I need second scrollTrigger instance just for texts ? To give you an idea what I want to create please see screenshots NOTE: this is free model downloaded from Sketchfab
  13. Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please?
  14. GSAP newbie here! Using ScrollTrigger with Vue to create parallax and pinned background but the scrolls bug out on page changes. When returning to a page, the page automatically scrolls down to the bottom of the page. I read the documentation and it is because SPAs do not destroy ScrollTriggers on page change. I tried implementing .kill() & refresh() in unmounted hook however it didn't help much. I tried to setup a Codepen but it is a big project and I couldn't figure out a way to create a minimal example.
  15. Hey all! First of all, I am designer learning some dev style fighting and I am amazed how many possibilities gsap gives, I was a guy with job related mid-life crisis and gsap allowed me to find enjoyment and excitement, just as 15 years ago when I was just starting my design journey Thanks to everyone that participated and contributed to GSAP! I decided to fight with my portfolio as this was perfect opportunity to practice coding and GSAP animations. My issue is - I've been learning three-js with one of the courses available in the net there and wanted to use it when building my portfolio. There's a part in the course when the author shares his custom scroll code (which is needed to sync positions of meshes in webgl canvas with html divs). Now the hard part I've been fighting with for over a week now: I want to use gsap and scrolltrigger to animate stuff and I can't get this custom scroll to work with scrolltrigger - if I don't specify the scroller proxy it gets all choppy and framrate drops low and when I put scroller proxy the whole structure doesn't work. I've been trying putting different values/names in scroller proxy as part of trial & error, but nothing seems to work Before I wasn't using threejs I was using locomotive scroll and I figured out how to pair it with scrolltrigger pretty easily. But in this instance, I am kind of forced to use this custom scroll code. I attach codepen (image not related ) with one note - somehow the scroll doesn't work in the codepen, but it works on my localhost. Hope I explained everyhthing well enough.
  16. HI Guys, I have created 2 boxes(large & small).. And i want to animate those boxes differently in different screen sizes. Here in code pen u can see a demo. Its for the large screen device. Here the small box is showing after the first box appears & then sliding to left. But i want to change the animation for medium or small screens. Like first the large box will appear like it do for large screens and then the small box will appear after a few seconds & then instead of sliding left it will disappear after showing a few seconds. I used matchMedia for making changes. But somehow im unable to get the result i want. Im so confused. I dont know what to do. Can anyone tell me whats the problem in my code.
  17. I have this animation, where I am having a hard time making a particular animation complete in almost 20% or start of a particular label. const zoomData = [ {scale: 1, origin: [0.5, 0.5] }, {scale: 18, origin: [0.685, 0.38], steps: [ { type : 'in', el : '.location_1', }, { type : 'out', el : '#text', }, { type : 'out', el : '.location_wrapper .section-title', }, { type : 'out', el : '.location_wrapper .andaman-key', }, { type : 'in', el : '#htxt', }, ], label : 'empty' }, {scale: 1, origin: [0.5, 0.5], steps: [ { type : 'out', el : '.location_1', }, { type : 'out', el : '#htxt', }, ], label : 'havelock' }, {scale: 18, origin: [0.500, 0.78], steps: [ { type : 'in', el : '.location_2', }, { type : 'in', el : 'svg #ctxt', }, ], label : 'chidiyatapu' }, ]; I have this object which is responsible for setting up the animation. It is used by the following Js to add it to the timeline. zoomData.slice(1).forEach(data => { if(data.steps) { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }); tl.addLabel( data.label , "<"); data.steps.forEach( step => { if(step.type == 'out') { tl.fromTo(step.el, { autoAlpha: 1, display: 'block', }, { autoAlpha: 0, display: 'none', ease: "power1.inOut" }, data.label ) } if(step.type == 'in') { tl.fromTo(step.el, { autoAlpha: 0, display: 'none', }, { autoAlpha: 1, display: 'block', ease: "power1.inOut" }, data.label + "+=20%" ) } }) } else { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }) } }); }); How can I make the text, Our Centers, Andaman Island and `#text` fade away when I am first time zooming inside.
  18. Sorry for not (yet) having a minimal demo, I hope that someone can point me in the right direction without, but I'm willing to build one if needs be. Also as the my problem ist related to iOS (and iPad OS) I might have to make a video if my explanation doesn't suffice. The situation: I have 6 Sections that fill the Body (minus fixed footer and header) the first is an group picture with transparent divs overlayed that scrollto (gsap.plugin) the related section of the person. Each section has a Timeline with a scrollTrigger with a label dead center. All of that works without a hitch on all desktop-browsers I tested it on. (Including Safari on the Mac.) I also have a onSnapComplete callback that fires an independent animation with a minimal delay. Also working as expected. On the i-devices however the sections tremble for quite a while regardless from of method i reach them. (Normal scrollling or scrollTo.) I have a delay and a duration for snapping, but playing with those didn't help. I tried force3D with false and true to no avail worked autoKill: false into the scrollTo - no dice... (I testet on an iPad Pro 12,9 " 4th gen and a iPhone 12proMax, so hardware speed isn't the likely reason) Here is the temporary linke to the page https://bit.ly/3jSenqy so you can see and compare if you would want to. I do hope that the issue is something that came up before and you can point me in the right direction. Thanks!
  19. Hello All, I created a Vertically Pinned section with GSAP and scrollTrigger the section link is attached. Basically this is working fine for me but there is a problem. I wants that when I click on a specific anchor then it will scrolled to the specific section I tried different methods but it is not working fine. It will be great if you help me in this case. I'll be thankful.
  20. Hi. I want to pin a section and change child sections using fadeIn-fadeOut. I tried to use the onToggle method to get the data attribute or just index for the current section, but in this case "onToggle" doesn't work. Same with "toggleClass". Do you know why this is happening? I know I don't need data attributes, index is enough, but I've tried to do it in different ways.
  21. Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already. I am having trouble animating an alternating entrance point based on class name. In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right. Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block with the alternating positioning done with Flexbox) I cannot for the life of me figure this out and I'm not fluent enough in GSAP/Js to get this over the finish line. Many thanks for your help!
  22. Hi! Here is a problem. This block moves down because text has 30% width and it has two lines. But script loads faster than text goes on the second line and the block moves down. I can't use <br/> because on mobile it will be other. How to fix it?
  23. Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it?
  24. Hello, First of all, i'm totally new to GSAP and really in love of it! Congrats team for this work. I work on an Angular v10. I would like to know if this following code follow the good practices for GSAP or if i can optimizes it better. Sometimes when i refresh my page, all animations are playing on the scrolltrigger simultaneously like they have lost their real positons. (i can add a video to show the issue) drawLine() { gsap.defaults({ease: 'none'}); gsap.set('.ball', {xPercent: -50, yPercent: -50}) var tl = gsap.timeline({ defaults: { duration: 0.5, autoAlpha: 1, scale: 2, transformOrigin: 'center', ease: 'elastic(2.5, 1)' } }) //Tl 1 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-header', endTrigger: "#c-description", scrub: true, start: 'top top', end: '+=400px', onEnter: () => this.setActivePath('dot1'), onEnterBack: () => this.setActivePath('dot1') } }) .to('.ball01', {duration: 0.01, autoAlpha: 1}) .from('.theLine', {drawSVG: '0'}, 0) .to('.ball01', {motionPath: {path: '.theLine', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 2 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-description', endTrigger: "#c-helping", scrub: true, start: 'top 25%', end: '+=420px', toggleClass: {targets: ".c-dot-nav", className: "reverse"}, onEnter: () => this.setActivePath('dot2'), onEnterBack: () => this.setActivePath('dot2') } }) .to('.ball02', {duration: 0.01, autoAlpha: 1}) .from('.theLine2', {drawSVG: '0'}, 0) .to('.ball02', {motionPath: {path: '.theLine2', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 3 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-helping', endTrigger: "#c-starting-1", scrub: true, start: 'top 25%', end: '+=720px', toggleClass: {targets: ".c-dot-nav", className: "reverse-w"}, onEnter: () => this.setActivePath('dot3'), onEnterBack: () => this.setActivePath('dot3') } }) .to('.ball03', {duration: 0.01, autoAlpha: 1}) .from('.theLine3', {drawSVG: '0'}, 0) .to('.ball03', {motionPath: {path: '.theLine3', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 4 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-starting-1', endTrigger: "#c-starting-2", scrub: true, start: 'top 40%', end: '+=260px', onEnter: () => this.setActivePath('dot4'), onEnterBack: () => this.setActivePath('dot4') } }) .to('.ball04', {duration: 0.01, autoAlpha: 1}) .from('.theLine4', {drawSVG: '0'}, 0) .to('.ball04', {motionPath: {path: '.theLine4', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 5 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-starting-2', endTrigger: "#c-flip", scrub: true, start: 'top 40%', end: '+=476px' } }) .to('.ball05', {duration: 0.01, autoAlpha: 1}) .from('.theLine5', {drawSVG: '0'}, 0) .to('.ball05', {motionPath: {path: '.theLine5', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 6 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-flip', endTrigger: "#c-tips", scrub: true, start: 'top 40%', end: '+=385px', onEnter: () => this.setActivePath('dot5'), onEnterBack: () => this.setActivePath('dot5') } }) .to('.ball06', {duration: 0.01, autoAlpha: 1}) .from('.theline6', {drawSVG: '0'}, 0) .to('.ball06', {motionPath: {path: '.theline6', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 7 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-tips', endTrigger: "#c-form", scrub: true, start: 'top 40%', end: '+=832px', onEnter: () => this.setActivePath('dot6'), onEnterBack: () => this.setActivePath('dot6') } }) .to('.ball07', {duration: 0.01, autoAlpha: 1}) .from('.theline7', {drawSVG: '0'}, 0) .to('.ball07', {motionPath: {path: '.theline7', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 8 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-form', endTrigger: "#c-talk-soon", scrub: true, start: 'top 40%', end: '+=690px', toggleClass: {targets: ".c-dot-nav", className: "reverse"}, onEnter: () => this.setActivePath('dot7'), onEnterBack: () => this.setActivePath('dot7') } }) .to('.ball08', {duration: 0.01, autoAlpha: 1}) .from('.theline8', {drawSVG: '0'}, 0) .to('.ball08', {motionPath: {path: '.theline8', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 9 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-talk-soon', endTrigger: "#c-footer-1", scrub: true, start: 'top 40%', end: '+=500px', toggleClass: {targets: ".c-dot-nav", className: "reverse-w"}, onEnter: () => {this.setActivePath('dot8'); this.nurse2.play();}, onEnterBack: () => this.setActivePath('dot8') } }) .to('.ball09', {duration: 0.01, autoAlpha: 1}) .from('.theline9', {drawSVG: '0'}, 0) .to('.ball09', {motionPath: {path: '.theline9', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); }
  25. After calling scrolltrigger refresh function in the middle of my page (to update starts and ends when accordions are opened) every single animation that happened before my location on the page broke If I go back to the beginning of the page before calling the scrolltriger refresh everything works prefectly, but not if I am in the middle of the page Unfortunately I can't share any code since it got a lot to it, and I simply can't create a simpler version. Maybe someone had a similar problem before I have tried using refreshPriority, did not work I have 6 accordions in total, and after I open them i want to update all of the starts and ends after.