Search the Community

I want to create a section like the video attached. If some one have experienced it will be a great help thanks. I have created animation along my svg path but want to stop it on different points like in the video. Untitled- Jun 17, 2021 6-30 PM.mp4

Hi Experts!! First of all thanks to GSAP and all here experts who are doing tremendous job, helps to beginners and those who stuck in code like me :), I have just start development on ScrollMagic and GSAP , I have two questions: 1. I want to auto scroll on scroll down or scroll up, for example if I am at first scene, when I scroll down, it should be go to the second scene and stop, similar behavior from scene 2 to scene 3. but in my code it is not autoscroll. I want this on mobile and desktop both but didn't get success. 2. When ever scroll down on mobile, the browser address bar auto hide, that push scene on top. Thank you in advance!

Hi guys, I am interested to do a button/slider timing animation and I like the one from the https://greensock.com/ main page. I am new to GSAP and I saw that tweenmax got deprecated and in general GSAP has a lot of plugins, features, etc. A bit lost... I don't know on which plugin to focus, or is only gsap3 core? Any examples, guidance will be much appreciated

Hi guys, I see that on this forum CodePen is heavily used, I prefer: https://codesandbox.io/ but I decided to try codepen. I tried to put a working example from my localhost to codepen but I got some issues with GSAP dependencies . I tried to use the CDNs from this example: https://codepen.io/GreenSock/pen/yLegBwO Uncaught TypeError: gsap.registerPlugin is not a function

Hello Devs , I have here 4 slides, everything works normally, but now every slider work alone. I want the sliders to work together but in one way ( change the first image from the first slider and after that change, the first image from the second slider and after the first image from the third slider, after that should come back to change the second image from each slider ) It is possible to do this animation?

Hi guys, my first post here ^_^, I tried to animate on `x` axes and it works ok but I want to make this animation better. I am quite lost because to achieve such thing I need many marker "start&end". https://codesandbox.io/s/nextjs-global-css-migration-forked-6psms?file=/pages/index.js:138-200 I know that my markers are messed up but I want to achieve 2 things: 1. At the moment my animation works only 1 way "when scrolling from top to bottom" - I want the animation to happen in both ways... how is possible to tell "end" to become "start"? 2. `left-col`, `middle-col`, `right-col` are under 1 `section` and when the animation `start` hits the `section` the third/last `right-col` could finish till it gets there. - I would prefer the animation to `start` when the view port hits `right-col` not `section` (`snap: 1 / 2,`) works but sometime is quite slow and animation and `snap` is not in sync. looks like something is missing. I don't think my GSAP code is clean, feel free to delete/simplify things if required Any guidance/support will be much appreciated!

Hey I have created a small example of what I wanna do. As you can see in my codepan video items are popping in correctly but after all three videos popped in I want to animate them on a path so it look like they are scrolling endlessly and I want to make it repeating. Please help me I'm new to gsap.

It is not working in my pc. index.html style.css app.js

So i would like to animate this model along a path: https://codepen.io/uiunicorn/pen/abJmVwo but it doesn't seem to work and i am getting this in console: Uncaught TypeError: Cannot assign to read only property 'rotation' of object '#<Group>' at Plugin._setterPlain [as rSet] (gsap-core.js:3367) at PropTween.render [as r] (MotionPathPlugin.js:301) at Tween.render (gsap-core.js:3163) at _lazyRender (gsap-core.js:187) at _lazySafeRender (gsap-core.js:193) at Array.updateRoot (gsap-core.js:2564) at _tick (gsap-core.js:1252) and ideas of what the problem is? here is the original pen that works: (my pen uses modules): https://codepen.io/uiunicorn/pen/zYZoYpV

Hello..! I did setup locomotive scroll with GSAP for my Wordpress Site. Currently it is running beautifully..! But the problm is that, None of my Elementor Scroll Animations are working. I am pretty new to Wordpress and Web Development. If you can help me, it would be a great pleasure. (Iam using Astra theme + Elementor Pro. I created some scroll animations for couple of Elementor sections. Everything not working. And I add my page (#page) as the locomotive scroll element.)

I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening. And would you please tell me how can I make this slider exactly like this video: https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing

Hello Guys, I am a newbie to this awesome scrolltrigger plugin. I somehow managed to get it worked the way I wanted but I am stuck at the very last part. As you can check in the below example link the entire block shrinks and move on x axis at start and at the end I want it to come back to center and become the normal size but it is not happening smoothly. You can check live example here: https://algobulls.netlify.app/ecosystem-2/ Sorry I cant upload Codepen as I am not able to replicate entire thing there. I request you guys to please help me out. I will really appreciate it. const sectionFirst = useRef() const mainIllustrationContainer = useRef() const firstHeading = useRef() const ecoCore = useRef() const ecoMarkets = useRef() const ecoOms = useRef() const ecoBrokers = useRef() const ecoclients = useRef() const ecoStrategist = useRef() const ecoChannelPartner = useRef() const ecoDataVendor = useRef() const videoBlock = useRef() const sectionSecond = useRef() const sectionThird = useRef() const sectionFourth = useRef() useEffect(() => { let tl = new TimelineMax() tl.fromTo( ecoCore.current, { autoAlpha: 0, }, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 300", end: "center 100", scrub: true, //markers: true, }, //y: 450, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( firstHeading.current, { autoAlpha: 0, y: 0, }, { scrollTrigger: { trigger: sectionFirst.current, start: "600 300", end: "800 150", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, autoAlpha: 1, y: -100, ease: "power2.out", } ) .to(firstHeading.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "80% 300", end: "90% 100", // markers: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 1, scale: 0, ease: "power2.out", }) .to(sectionFirst.current, { scrollTrigger: { trigger: mainIllustrationContainer.current, start: "0 0", endTrigger: videoBlock.current, end: "center center", // markers: true, pin: true, scrub: true, pinSpacing: false, }, //y: 450, duration: 3, ease: "power2.out", }) tl.fromTo(sectionFirst.current, { scale:1, x: 0, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top-=400 300", end: "200 200", markers: true, scrub: true, }, scale: 0.53, x: -290, duration: 3, ease: "power2.out", }) // this is the one which makes it scale 1 ///////// .to(sectionFirst.current, { scrollTrigger: { trigger: "#data-vendor", start: "bottom+=150 300", end: "bottom+=250 150", // markers: true, scrub: true, }, scale: 1, x: 0, duration: 3, ease: "power2.out", }) tl.fromTo( ecoMarkets.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionSecond.current, start: "top 400", end: "200 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoOms.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionThird.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoBrokers.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: sectionFourth.current, start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoclients.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#clients", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoStrategist.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#pro-strategist", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoChannelPartner.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#channel-partner", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( ecoDataVendor.current, { autoAlpha: 0, y: 300, }, { scrollTrigger: { trigger: "#data-vendor", start: "-300 200", end: "-100 100", // markers: true, scrub: true, }, y: 0, duration: 2, autoAlpha: 1, ease: "power2.out", } ) .fromTo( '#eco-video', { autoAlpha: 0, }, { scrollTrigger: { trigger: "#data-vendor", start: "bottom 200", end: "bottom+=200 100", // markers: true, scrub: true, }, duration: 2, autoAlpha: 1, ease: "power2.out", } ) }, [])

Hello, Im trying to make the images dissapear, by having them on negative yPos and the transitioning them on hover back on the screen. mainly with section.addEventListener('mouseenter', createHoverReveal); section.addEventListener('mouseleave', createHoverReveal); Is there something missing in my code?

Hi, Extremely new to GSAP etc, and I only found myself here by accident after weeks of trying to find something JS that would speak to pseudo elements. So hooray!! My problem is I can't seem to figure out how to get my function to repeat and I'm not sure if I've quite nailed the conversion. I've converted from a keyframes animation and it seems to be working okay, however it only does it once and then stops. I've looked through a variety of the instructions and forum questions on here to get to where I have, but each one doesn't seem to quite gel to my situation. So basically my keyframes were: @keyframes hello { 0% { top: 100%; } 33%, 100% { top: -50%; } } And my selector: .world::before { animation: hello 3s 0.4s ease-in-out infinite; } So all simple stuff. To convert this, I have this GSAP so far: gsap.registerPlugin(CSSRulePlugin); var rule = CSSRulePlugin.getRule(".world::before"); gsap.to(rule, 0.3, { cssRule: { top: "100%" }, ease: Power4.easeInOut }); gsap.to(rule, 0.7, { cssRule: { top: "-50%" }, ease: Power4.easeInOut }); So everything's talking to each other, but I can't get the GSAP function/rule to do the "infinite" part of the original animation. And again I'm not sure if I've nailed the timings based on the percentages in the keyframes. And of course the 0.4s delay, I'm not sure where to put that either. I've created a code pen with the usual bits to try and illustrate, if that helps at all. Thank you very very much for any help!

Hi all- I'm brand new to the GSAP space. I have an existing React project and want to implement a GSAP animation. The person that made it for me sent it in an HTML file. How would I go about implementing this into my React site? I know there's a react-gsap NPM package but figured there might be an easy way to just plug the HTML doc in and get it working that way? I've attached the file to this post; if you click when it loads, it should play the animation. Thanks! index-v3-3 (1).html

Hello everyone, I have an animation that needs to display only above 992px width and 700px height. however it seems i cant add more than one condition to matchMedia. What is the (proper) way to do this? (I hope you dont mind i used your matchMedia demo as a starting point for my codepen) Thanks, Patrick Rijkee

Hello. Is it possible to do masked gradient reveal text or image like on https://www.apple.com/iphone-12-pro/ 1. I want to reveal first headers on page load like on iphone presentation. It's reaveling left to right. 2. Other sections i want to reveal on scroll trigger with scrub option with gradient also.

Hello! Is there an easy way to make the width of a span expand to like 500px and then collapse to 0, within a few seconds? Here is what I have so far: gsap.to('.block', {duration: 1, width: 500}, 0.2); I know when using keyframes it would be something like this: @-webkit-keyframes block { 0% { width: 0px } 100% { width: 500px } } Thank you!

Hi, I've been playing about with this codepen pen example I'm trying to make a continuous loop animation with vertical scrolling rather than horizontal however i'm running into a few issues. The list doesn't seem to start at the first index and when i scroll it's not going in sequential order but it's just jumping about (i.e i want 1 > 2 > 3 but it's doing 1 < 12 > 2 < 13 > 3) Any ideas? Is it because the content is dynamic and the plugin has issues recalculating? I'm using: GSAP v3.6.0 Angular 11 Demo: https://stackblitz.com/edit/gsap-continuous-scroll

Hey guys, I'm very new here (& not all that great with programming) - long time lurker, big admirer of GSAP and happy be in the club! I'm hoping somebody here can help me figure out what I'm doing wrong. I'm basically attempting to convert this simple CodePen into Frontity/React (embed at bottom of post). Here's the link to my CodeSandbox https://codesandbox.io/s/xenodochial-saha-mfj42?file=/packages/mars-theme/src/components/test-scroll.js The errors I get seem to come from my scroll-test.js file. No matter what I do, I can't seem to get any ScrollTrigger action (or even basic 'to' motion). There have been some phantom moments once I've changed some code to target a different element, the page instantly begins to animate - but after I refresh, I'm given fatal errors instead. Not really sure what that is... If I attempt to target certain elements, it won't run. If I target a previously declared component, it at least runs - but it claims scrollTrigger is an invalid property I'm left to believe that GSAP isn't properly firing. Any ideas for troubleshooting this problem? Happy to supply any additional information requested. I tried to follow the rules and created my problem on codesandbox, since it was the only service that had Frontity available. Cheers, AGW

I'm trying to expand the content using GSAP, so I can have the height animated of the hidden content. If you click the "Sterilisers" button/product, you expanding the content. I applied GSAP but with not the expected result. Please advice what's the best way. $('.js-tile').richTile().on({ 'expanded.RichTile': function(event, tile) { // disable siblings on expand var siblings = tile.element.siblings('.js-tile'); siblings.richTile('enable'); siblings.richTile('collapse'); var currentTile = $(this); var $tiles = $('.js-tile'); $tiles.not(currentTile).addClass('not-expanded'); console.log('click 1'); TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut }); // re-enable when this tile is collapsed tile.element.one('collapsed.RichTile', function() { siblings.richTile('enable'); $tiles.not(currentTile).removeClass('not-expanded'); console.log('click 2'); TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut }); }); } });