Search the Community
Showing results for tags 'refresh'.
Found 21 results
-
Hi everyone, I'm experiencing an issue with my animation. I've searched through existing topics, but couldn't find a solution that matches my problem. To provide some context, I've created a dynamic page for displaying project details. It consists of a description section on the left and an image section on the right. The description is scrollable, and the image changes based on the current description. The issue like i start from project/1 i show all there descriptions all good but when i go to the project/2 or project/^n the scroll still in the register or some where that affect to my animation (the scroll affect to the first image because the scroll still ) ,However, everything works fine if I refresh the page like what i want , So, I'm looking for a solution to reset the ScrollTrigger and resizing functionality dynamically. (methods or props in the useGSAP) Thanks for your help, and I apologize for the lengthy explanation. I just wanted to ensure the context is clear. gsap.registerPlugin(ScrollTrigger); const workInfoItemsRef = useRef(); let imageRefs = useRef([]); const ParrentRef = useRef(); useGSAP( () => { // initialise the imageRefs if ( workInfoItemsRef.current && imageRefs.current.length > 0 && NumberOfFeature > 1 ) { // N2aficti ZIndex directly lrefs: imageRefs.current.forEach((item, index) => { item.style.zIndex = imageRefs.current.length - index; }); // nInitialiser clip-path b refs: gsap.set(imageRefs.current, { clipPath: function () { return "inset(0px)"; }, }); // nCriyi l'animation : const animation = gsap.to( imageRefs.current, // fiha ta last child ! rd lball { clipPath: function (i) { return i != imageRefs.current.length - 1 ? "inset(0px 0px 100% 0px)" : "inset(0px)"; }, stagger: 2, ease: "none", } ); // nCriyi ScrollTrigger l Parrent ref: ScrollTrigger.create({ trigger: ParrentRef.current, start: "top bottom", // markers:true, animation: animation, scrub: 1, }); } }, { dependencies: [CurrentProject], scope: ParrentRef, revertOnUpdate: true } );
-
Hi, I was creating an animation for client, but can't. Expected behavior: You can see that I have three red boxes. I just want to increase their heights when they are in the center of screen. I want to link it to scroll. Current problems: 1. It starts well and all the start markers update well, when height is increased. 2. But end trigger remains at the initial position. Here's demo: https://stackblitz.com/edit/stackblitz-starters-bd8qkk?description=Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine&file=src%2FApp.jsx&title=node.new Starter see attached image, as you can see end-target 1 should be 200px downwards.
-
Hello, seems that I cannot get ahead with the invalidateOnRefresh mode. I want my logo (red rectangle) start scaled and vertically centered and then scale down and move to the top into the header area on scroll. In my scrollTrigger timeline there are also other things that happen so I need to have that timeline. What I achieve is the choice between 2 things both not doing exactly what I want. invalidateOnRefresh: true does nothing. If I resize the window the centering via CSS is no longer respected (I understand that gsap overwrites and memorizes it for performance reasons). If I add the onRefresh part (commented out in the Codepen) the resizing works centering the rectangle correctly, but then starting the scroll makes the element position wrong again. I need both, though! Thank you in advance! Best regards, Stefan
-
Hey Everyone, Been scrathcing my head over this one and simply can't figure out how to implement ScrollTrigger rfresh(); to recalculate % start and end values on screen resize. So in my demo there are two elements which on scroll reduce their widths from 50% - 0% in the left and right direction, Imagine two curtains opening. Upon load, and with screen resize the two curtains both take up 50% of the viewport no problem, but if I resize after engaging the scrollTrigger the intial values of the 50% are remaining and the "curtains" overlap each other. As can be seen when scrolling and then resizing in the demo. I believed this to be a simple fix with ScrollTrigger.refresh(); to recalculate but I feel like I'm missing something super obvious! Sorry for the silly question I've been wracking my head over this one and have been staring at the screen for hours lol ?
-
when I reach to a section with horizontal scrolling (which uses scrolltrigger and locomotive scroll) and I refresh the page the page breaks down and the section which has scrolltrigger disappears . here is my website http://www.insoostudio.ir and you can produce this problem by refreshing the page on this section . after refreshing the page on this section you will see that this section scrolling fails and all the section below it will be disappear and all and all the page will breaks down. here is my config for scrolltrigger ``` gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".scrollContainer"); pageContainer.setAttribute("data-scroll-container", ""); const scroller = new LocomotiveScroll({ el: pageContainer, inertia: 0.8, multiplier: 0.5, smooth: true, getDirection: true, }); scroller.on("scroll", function (t) { document.documentElement.setAttribute("data-direction", t.direction); }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: pageContainer.style.transform ? "transform" : "fixed", }); let horizontalSection = document.querySelector(".horizontal-scroll"); let pinWrap = horizontalSection.querySelector(".pin-wrap"); gsap.to(pinWrap, { scrollTrigger: { scroller: "[data-scroll-container]", scrub: true, trigger: horizontalSection, pin: true, start: "top top", , end: () => `+=${pinWrap.offsetWidth}`, }, x: () => window.innerWidth - pinWrap.offsetWidth, ease: "none", }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); ``` I will be thankful if you can help me with this problem.
-
Hello good day, I have an issue within scrollTrigger and scrollSmoother. Sometimes my website loads all animations correctly, other times incompletely. I think it has to do with the fact that scrollTrigger has already finished doing its calculations but the page hasn't finished loading all its elements yet. The reason is that if I scale the browser window, it fixes Is there a way to update or refresh scrollTrigger or scrollSmoother? For example, refresh when some DIV enters the viewport or when all elements finish loading? I tried adding ScrollTrigger.refresh() like this code below, but I am not sure how to implement it gsap.to('.amenidadSectionColBottom', { opacity: 1, ease: 'none', scrollTrigger: { trigger: '#amenidadSection', start: '30% 80%', end: '50% 70%', scrub: true, onEnter: () => ScrollTrigger.refresh(), } }); Thanks in advanced for your help -
Hi, I'm implementing ScrollTriggers with pinning on a website I'm working on but having issues when accordions are being opened/closed. When the user scrolls to the product image gallery it becomes pinned to allow for the scrolling of the product content. This works great initially but once I open the INGREDIENTS tab (any tab for that matter), it obviously increases the height of the parent container while the slider stays the height of the viewport. But if I scroll down to the next product, that products slider jumps. You can see a video reference here and you can also see this in the browser by visiting: https://eldetalleusa.myshopify.com/ (view at a 13") This is the code that I'm using to init the ScrollTriggers is: this.fixedElements.forEach(element => { ScrollTrigger.create({ trigger: element, start: "top top", end: "bottom top", pin: true, markers: true, pinSpacing: true, }) }) And the code I'm using to trigger the ScrollRefresh is: I've also tried ScrollTrigger.update() this.accordions.forEach(accordion => { accordion.addEventListener('click', e => { ScrollTrigger.refresh() }) }) Any help would be greatly appreciated. Thanks, Dayne
-
Hey team, I have a pinned box, which is fixed till the end of the page. And I have the Flickity carousel below. So after the carousel is implemented, the pin stops working. I tried to add ScrollTrigger.refresh() after the carousel init, but it didn't work. In the demo I added a delay for the carousel to show that the box was pinned and then stopped to work. Can you guide me, please?
-
Hello, I'm working on a rather large one page website with loads of different tweens, scrolltriggers, pins, timelines, etc. The site uses the ScrollSmoother plugin for smooth scrolling but i noticed weird behaviour when using the smooth scroll. I've included a pen to mimic the part that's causing problems When using ScrollTrigger.refresh() the order of the triggers being refreshed is different when using the ScrollSmoother. In the included pen i have 3 sections with 3 different types of animation. the order of the tweens in js is not the same as the order of the sections: 1 - normal tween with scrolltrigger - section #2 2 - timeline tween with scrolltrigger - section #3 3 - Scrolltrigger.create() - section #1 When not using the ScrollSmoother, the refresh order is: 1 - 2 -3 (as it should be) But when i enable SmoothScroller the refresh order is: 3 - 1 - 2. This messes up my triggers because 1 and 2 both have pinspacing. I've tried refreshing the timelines' scrolltrigger as mentioned here, but no success. I did manage to get it to work using refreshPriority:-1, but i don't think that's a fitting solution for me (because of the large amount of tweens/triggers/etc). So i was wondering if this is expected behavior or if i missed something or did something wrong or anything. Just trying to wrap my head around it. Any help would be highly appreciated! Cheers, Oscar
-
// Parent Component export default function ParentComponent() { const [title, setTitle] = useState('values'); const changeContent = (title) => { setTitle(title); } const bgRef = useRef(null); const mainRef = useRef(null); const bgTransitionRef = useRef(null); useEffect(()=>{ const tl = gsap.timeline(); tl.fromTo(bgTransitionRef.current, {y: 0, skewY: 0}, {y: "-120vh", skewY: 4, duration: 1.2, ease: "power4.inOut"}) .fromTo(bgRef.current, {filter: "brightness(3) grayscale(150%)"}, {filter: "brightness(1) grayscale(0%)", duration: 1.2}) .fromTo(mainRef.current, {y: 150, autoAlpha: 0}, {y: 0, autoAlpha: 1, duration: 1.2, ease: "power3.inOut"}, "<0.5") }) return ( <div className="parent-component"> <img className='bg-background' src="/assets/clouds.png" ref={bgRef} /> <div className="bg-transition" ref={bgTransitionRef} ></div> <ChildComponent changeContent={() => changeContent('values')} /> <div/> ) } // Child Component export default function ChildComponent(props) { return ( <div className="child-component" onClick={props.changeContent}> <h4>{props.title}</h4> </div> ) } Alrighty, so what's happening is that whenever I click the ChildComponent, it should run a function called 'changeContent'. It does change the content when I click it. But what it also does is that it restarts all of the GSAP animations. Why is it doing this? And how can I prevent it from happening? -
I created a timeline animation which runs on click event. Animations are working smoothly only after few refresh in most of the browsers. Below is my function with timeline.. function exploreTimeline() { gsap.timeline() . to("body", { position: "static", overflow: "auto" }) . to(".intro-content", { duration: 0.3, autoAlpha: 0.01, marginLeft: 50, ease: "power1" }, 0) . to(".intro-content", { duration: 0.8, height: 0, marginBottom: 0, ease: "power2.in" }, 0) . to(".intro-section", { background: "none" }, 0) . to(".globe", { filter: "blur(5px)" }, 0) . to(".magical-slider-container", { duration: 0.8, bottom: "5%", ease: "none", onComplete: () => { ScrollTrigger.refresh(); } }, 0) }
-
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. -
I'm using the ScollTo plugin to hijack the scrolling of the user: I've got multiple sections. Once the user scrolls a little bit the first scrollTo animation gets triggered and scroll the whole window to the second section. Once the user scrolls down more it automatically scrolls down to a third section. To achieve this I've use this code: let tlhomescroll = gsap.timeline({ scrollTrigger: { trigger: '.o-herotall__bg', start: "top top", end: "bottom center", autoKill: false, markers: true, pin: false, scrub: false, toggleActions: "restart none none none" } }); tlhomescroll .to(window, {duration: 1.5, ease: "power3.inOut", scrollTo: "#section2"}); using "o-herotall__bg" as a trigger on my 1st section it scrolls to section 2. I then do the same for section 2 to section 3. This all works fine, but the problem is: Once the user scolls down and reloads the page or comes back from another page to this on on a lower scroll position, the scrollTo is triggered and the window scrolls to section 3. How can I prevent the scroll event from triggering when the page isn't loaded at the top? -
Hello, I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added. Thanks for your help
-
Hi, I am new to Greensock and I really love it so far! Today I was struggling with setting a random duration on a tween or timeline object. I created a helper function that returned a random value for the duration. In the tween properties I called the function on the duration property. However, the random value only was set once and the function was never called afterwards, although the animation was infinite by setting repeat: -1. I found the property repeatRefresh, but the docs say: What am I doing wrong and how can I set dynamic values for duration or delay for each new repetition of my animation? Thanks for some hints in advance!
-
Hello there! I am new to GSAP and I want to animate a navbar to shrink whenever the user scrolls down and grow when the viewport is back at the top. So far, I have been trying ScrollTrigger to achieve this, and it works completely fine until I refresh the webpage on the middle. Since it does not scroll back to the top on refresh, the new viewport will be somewhere down on the page and not the top of the window and so my animation will not work perfectly in every situation. I am attaching some screenshots to show you what I mean exactly... And then after refreshing the page this happens: Is there a way to set the animation start to the top of the window (always)? Currently my code looks like this: gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(CSSRulePlugin); gsap.to(".custom-logo-link", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: true, toggleActions: "play none none reverse" }, height: "50px", duration: 0.2 }); gsap.to(".navbar", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: false, toggleActions: "play none none reverse" }, backgroundColor: "white", duration: 0.1, boxShadow:"0px 6px 25px -7px rgba(0,0,0,0.32)" }); Any idea would be appreciated! Solution: The trigger element was a sticky navbar So I set the trigger element to a fixed element like that stripe with the phone number.
-
Hi there! I´m using the brand new Scroll Trigger plugin, it´s amazing! But i´m having a problem using it with Smooth scroll: i have a link that scroll the page to some point, but after this scroll the Scroll Trigger markers move and the animation that should be triggered doesn´t start. If not scrolled, the script works as it should. Here is the example with markers: https://byhumans.works/area/cliente/roalca/ The bottom blue section have a countdown ( gsap timeline ) that is triggered once with Scroll Trigger. Click on buttons after "Nuestros Productos" title and you will see how the blue section with numbers below lost the trigger start point. I have to do something else after i smooth scroll the page? if i use other script to scroll the page same thing happens. This happens in all browsers, in pc, ipad and smartphone. Thanks My js: // scroll on click category var prodCatBtn = util.$$('.prod-cat-link'); // scroll util.on(prodCatBtn, 'click', function(){ gsap.to(window, { duration: 0.35, delay: .35, scrollTo: { y: ".switcher-prod", offsetY: 140 }, ease: "power2.inOut" }); }); // top boxes animation var counter1 = { var: 1950 }; var counter2 = { var: 0 }; var counter3 = { var: 0 }; var count1 = util.$(".number-1"); var count2 = util.$(".number-2"); var count3 = util.$(".number-3"); count1.innerHTML = counter1.var; count2.innerHTML = counter2.var; count3.innerHTML = counter3.var; gsap.registerPlugin(ScrollTrigger); // counter animation var tl = gsap.timeline({ repeat: false, ease: "none" }); tl.to(counter1, { var: 2004, duration: 3, onUpdate: function () { count1.innerHTML = Math.ceil(counter1.var); }, }) .to(counter2, { var: 16, duration: 3, onUpdate: function () { count2.innerHTML = Math.ceil(counter2.var); }, }, "-=2") .to(counter3, { var: 160, duration: 3, onUpdate: function () { count3.innerHTML = Math.ceil(counter3.var); }, }, "-=2"); ScrollTrigger.create({ trigger: ".counter-wrap", animation: tl, toggleActions: "play pause resume pause", start: "top bottom", markers: true, });
-
Hi, I meet a simple problem with a tween : when I execute a first time my tween and then resize my window, the tween is happens badly, but if I refresh my page everything works fine, I've searched on forums but I don't find expected results ? In a first time, I've thinked the problem was linked to my CSS properties but when GSAP tweening it uses pixels values, and that's my only clue to resolve the problem. Here, an attached minimal repository : https://github.com/pierredarrieutort/Jape/tree/minimal_repo_for_menu
-
When I first load my page or when I refresh the page, my svg shows up for a split sec before it loads its starting position. Not sure if it's showing up on codepen, but I have a ton of shapes and that might be causing the delay? Anybody encounter this know a solve? Thanks
-
Hi everyone, I have been trying to find out a way to refresh a timeline without having to reload the whole page. This is for my development tools so i don't have to always hit the browser refresh button and drag my slider to the last location i was editing to see my new css updates. So here is what i'm doing and hoping you can help me out. So i have my developer tools i have created for my greensock projects to help me with my projects. We have a slider bar to move me along in the timeline we have created. (my projects tend to be like learning videos). Whenever i make an update to my css i have to hit reload on the browser and drag my slider to the position i am working in. I do this like a thousand times a day and i'm getting a little tired of this. lol. I have been able to get the browser to read my saved css edits without refreshing the whole browser. But when i do that my greensock timeline is still going off of the old styles i had before i updated them. I'm looking for a way in code that i could also have greensock recalculate the timeline without refreshing the whole page. I want the inline css styles to update to match the updated css i just pulled in. I would love something like mytimeline.refresh(); but i don't think we have anything like that. My main goal i want is when i'm working on the timeline and i need to move a div up 100 px i can hit my own reload button and it will update the greensock timeline to know that i moved my div up and make the animation correct and update the inline style. I hope this makes sense to everyone and there is a solution out there to help me. I just want to hit my own reload button and see the new css and the updated timeline properties show up without hitting the browser refresh button. Thanks, Brad
-
I have a scrolling element (x axis) which I have applied draggable to. Everything is working fine when the page loads however when I append a new child element to it the scrolling element does not update its width which makes the element unscrollable. I have had a look at running update(), applyBounds() and even manually changing the padding right value but no bueno.
