All Activity

hello, new in gsap. the issue i am facing is that there is an element which i want to came along side when i scroll and behave different in each section. i got this working. the issue i am facing is that how do i change height and width as well. i cant do it, it remains the same no matter what is change. any help would be appreciated let circleImg = gsap.timeline({ scrollTrigger: { trigger: ".circleImg", endTrigger: ".aiana-projects", pin: true, pinSpacing: false, scrub: true, start: "center center", end: "bottom 10%", // markers: true, }, }); // Animation for section 1 let animation0 = gsap.timeline({ scrollTrigger: { trigger: ".aianaFeture-2", start: "center center", end: "bottom top", scrub: true, // markers: true, }, }); animation0.to(".circleImg", { xPercent: 120, // Move horizontally in section 1 height: "1000px", width: "1000px", }); circleImg.add(animation0); // Animation for section 1 let animation1 = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects1", start: "top top", end: "bottom top", scrub: true, // markers: true, }, }); animation1.to(".circleImg", { xPercent: 0, // Move horizontally in section 1 }); circleImg.add(animation1); // Animation for section 2 let animation2 = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects2", start: "top top", end: "bottom top", scrub: true, // markers: true, }, }); animation2.to(".circleImg", { xPercent: -120, // Move vertically in section 2 }); circleImg.add(animation2); // Animation for section 3 let animation3 = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects3", start: "top top", end: "bottom top", scrub: true, // markers: true, }, }); animation3.to(".circleImg", { xPercent: 0, // Rotate in section 3 }); circleImg.add(animation3); // Fade out when reaching the target section let fadeOutAnimation = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects", start: "top center", end: "bottom center", scrub: true, // markers: true, }, }); fadeOutAnimation.to(".circleImg", { opacity: 0, // Fade out the div }); circleImg.add(fadeOutAnimation);

Thanks for the insight, something else in my project was causing trouble. Figured it out now!

ok thanks, here's the stackblitz link: https://stackblitz.com/edit/vitejs-vite-jnja3f?file=src%2FApp.jsx

Just setting the end trigger to "bottom bottom" fires onLeave when I scroll to the bottom of the page. What exactly is not working in your case? https://codepen.io/mvaneijgen/pen/rNgjadx?editors=1111

Hi all, I've got a really simple problem on which I'm debating what the best solution is. In the footer of a website I'm using ScrollTrigger. When the bottom of the footer reaches the bottom of the website, I need to fire a console.log. The only thing I could find in the ScrollTrigger documentation was the onLeave event, but that only get's triggered when you scroll past the marker. So that would result in the end value looking like: end: 'bottom-=1px bottom', I was wondering if there are any other ways to do this. The specific example with bottom-=1px is not working as expected in my specific scenario. Thanks in advance!

Hi @elderspite welcome to the forum! When you want to target a class you have to prefix it with a dot eg spinme becomes .spinme If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/YzbNPYE?editors=1010

here is compressed video of what im facing dental-actual.rar

basically when the end marker touches the scrollend marker the whole div blinks for a second and goes back to normal

https://stackblitz.com/edit/stackblitz-starters-adceyb?file=app%2Fglobals.css this is my project and im not facing that error on stackblitz but im still facing that issue on localhost even after using the useGSAP hook

Does GSAP only work on images in a Div or can you use special characters? I'm not even sure what to google because this code pen https://codepen.io/theshadowcallsu/pen/XWwrWbo has the CDN and it worked when i was following the tutorial

I'm not sure why you would need flip for that. If you create a timeline you can just mix and match Flip with normal tweens and combine them in to one animation. When animating complex strings you have to make sure all the suffix are the same, eg in your case suffix all the values with a % sign. You can read more about this here In your Flip state you tell it to capture the clipPath, but none of the elements you 'watch' have a clip path property, only your <img> tag has this property, to that is also the element you want to watch. Again tweening a clipPath isn't really something you'll need flip for you can just use a normal tween for that. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/NWVdPxL?editors=0010

ok so i was trying to get this menu effect here: https://www.niccolomiranda.com/ and so i followed a tutorial on youtube at first it didnt work but after a while i got it to work but now the animation is not reversing, here's the code edit: here's the stackblitz link: https://stackblitz.com/edit/vitejs-vite-jnja3f?file=src%2FApp.jsx Navbar.jsx

Hey GSAP Crew & Ninjas, 1. ) Is it possible to FLIP a clipPath? property I have tried to create a minimal demo from the Flip example. 1 - Added img 2 - Add css for image, default state clip path and then for the final layout a different clip path (Just a Rect -> Left Clip Box) 3 - I added clipPath to the props (spelt w/ camel case like gsap can talk to?) 4 - I Changed simple to false, in two places. So far, I can get it to tween from any of the states? If I add a CSS ease next to the img tag, it does animate, but it doesn't really tween in the beautiful way flip makes it. Can it be done? Any time and wisdom greatly appreciated.

when you scroll to the section4 it disappears and appears back when it is in view can anybody please guide me whats happening and how can i solve it https://dentalwebsitesweb.vercel.app/ above is the staging link of website and below im pasting the gsap code im using in nextjs function Section3() { const sectionRef = useRef(null); const triggerRef = useRef(null); gsap.registerPlugin(ScrollTrigger); useEffect(() => { let videoSections = gsap.utils.toArray(".scroll-section"); const pin = gsap.to(videoSections, { xPercent: -100 * (videoSections.length - 1), ease: "none", scrollTrigger: { trigger: sectionRef.current, pin: true, scrub: 0.5, start: "top", end: "+=3000", snap: { snapTo: 1 / (videoSections.length - 1), duration: 0.5, }, }, }); return () => { pin.kill(); }; }, [gsap]); return ( <section className="scroll-section-outer"> <div ref={triggerRef}> <div ref={sectionRef} className="scroll-section-inner"> <div className="scroll-section"> <h3>Section 1</h3> </div> <div className="scroll-section"> <h3>Section 2</h3> </div> <div className="scroll-section"> <h3>Section 3</h3> </div> <div className="scroll-section"> <h3>Section 4</h3> </div> </div> </div> </section> ); }

Hello Guys I am using this attractive work but having more stripes. 14 stripes, but my clicked stripe is not stopping on fixed position it is changing everytime. can anyone guide?

Btw, I love the design >>

@Rodrigo that works now ! thank you so much grateful to you

Hi Nick, Indeed refs had nothing to do in this case as you already found out. Currently we don't have a GSAP powered slider in React on our Stackblitz collection but is definitely a good idea to have one. In your setup I would restart the timeline of the progress bar and create that just on the initial mount, I don't see a need to revert that everytime the index is updated. Unfortunately I ran out of time to create a demo of this in React, but this codepen should provide a good idea of the approach I would take: https://codepen.io/GreenSock/pen/JjVmWKb The main idea is to use a timer, in your case instead of a delayedCall a Tween/Timeline for the progress bar, the rest is pretty much the same, without the Observer part of course. Use the progress bar timeline to do that, in the onComplete callback update the state (slide index) and use a regular useEffect hook to call a method that is wrapped in a contextSafe or use a useGSAP hook as well (they're pretty much the same). Tomorrow I'll look into creating a port of that codepen to react and see if I can add a progress bar to it as well. Happy Tweening!

Hi, Just add a return statement at the end of the useGSAP hook in order to clear the styles applied by Flip to the elements and it seems to work the way you intend: useGSAP( () => { container.current.classList.add('type--open'); const flipstate = Flip.getState(['.type__expand-img', '.anim'], { props: 'transform', }); container.current.classList.remove('type--open'); Flip.to(flipstate, { ease: 'sine.inOut', simple: true, scrollTrigger: { trigger: container.current, start: 'center bottom', end: 'center top', scrub: true, markers: true, }, }); // RETURN STATEMENT HERE! return () => gsap.set(['.type__expand-img', '.anim'], { clearProps: 'all' }); }, { scope: container } ); Here is a fork of your demo: https://stackblitz.com/edit/react-jdkto4?file=src%2FApp.js Hopefully this helps. Happy Tweening!

Hi there, I just finished the implementation of a website for a client: https://www.marinadibardibeach.it/ I've used multiple ScrollTriggers in order to manage scrolling animations while scrolling. All the animations are istantiated in a timeline after the document is loaded: document.addEventListener("DOMContentLoaded", function (event) { //wait until images, links, fonts, stylesheets, and js is loaded window.addEventListener("load", function (e) { console.clear(); console.log("loaded"); gsap.registerPlugin( ScrollTrigger, ScrollSmoother ); startUp(); // function to start timeline }); }); However, one of the ScrollTriggers, which is responsible for pinning a section while scrolling gets a wrong start/end position: imageScrollTrigger = ScrollTrigger.create({ trigger: ".section-home-6", endTrigger: ".marker-home-7", start: "bottom 0%", end: "top 0%", pin: ".section-home-7-inner", invalidateOnRefresh: true, // pinSpacing: true, // markers: true }); It is a simple implementation for pinning an image that is resizing while scrolling, however the start/end position are not correctly calculated so I manually invoke a imageScrollTrigger.refresh() when entering the precedent section, however when the method is invoked, if the user is Scrolling, the scroll locks, probably because gsap resfresh the height of the pinned section. I've tried different approaches but it doesn't seem to work. I just want to reach a fluid scrolling over the website. The problem is only present on mobile, moreover, since I've used multiple ScrollTrigger I've set ScrollTrigger.config({ ignoreMobileResize: true }); // and commented // ScrollTrigger.normalizeScroll(true); because of performance reasons

Hi @Wild West Design and welcome to the GSAP Forums! This is mostly because of normalizeScroll, which is mostly a feature created for devices and not desktops/laptops. In a nutshell normalizeScroll puts the scroll in the javascript thread of the browser so it's update is not the same as the regular scrolling thread that's why you see those jumps. What you could try is to add normalizeScroll if the user is on a touch device, using ScrollTrigger's isTouch property: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch Something like this: ScrollSmoother.create({ ... normalizeScroll: ScrollTrigger.isTouch === 1, }); Hopefully this helps. Happy Tweening!

I forgot, this is the debug view, which allows you to test how the browser refresh is working without all the iframes on codepen's edit mode: https://codepen.io/pen/debug/LYobgva Happy Tweening!

Hi, I believe the issue is somewhere else in your setup, most likely in the CSS you have in place. On top of that I wouldn't use jQuery's animate function to create the ScrollTrigger and MatchMedia instances, just use a regular function for that: function blockPinned() { let section = $(".pinned-section"), leftCol = section.find('.text-left'), rightCol = section.find('.text-right'), mm = gsap.matchMedia(); mm.add("(min-width: 992px)", () => { ScrollTrigger.create({ trigger: leftCol, start: "top 250", end: "top 250", endTrigger: rightCol, pin: true, pinSpacing: true, scrub: 1, markers: { indent: 300 }, id: "left" }); }); } Honestly I don't see the need and/or use for the animate method in there. Finally, as I mentioned before, this is more likely caused by something else in your setup. I created a fork of my previous codepen demo and it seems to work as expected: https://codepen.io/GreenSock/pen/LYobgva Hopefully this helps. Happy Tweening!

@mvaneijgen you the Boss! Thank you very much for the kind answer and the additional information. I've added the stiles in the timeline and it works! Now I will try to create more timelines attached to different elements and in that way I will try to control the body background color.

Hi Cassie, Thank you for getting back to me on this. Like you said I may have to come up with a GSAP-friendly way to deal with sticky elements. If I find a universally viable solution I will post it here.