Search the Community

Hello GSAP people, I already know the answer is probably easier than I think, but I can’t seem to figure it out. Here’s a small demo: https://codepen.io/PhilippeGoulliart/pen/PoMwPoX I'm trying to set up horizontal scrolling of the "train" inside the frame. The problem is that when I reach the middle of the scroll, I expect to see only the purple square—meaning that the train has translated by 33.333%, which is half the translation I want. However, instead of seeing only the purple square, I end up further into the timeline, seeing half of the purple square and half of the pink one. I’ve tried adjusting the scrub to a number and changing the easing values, but nothing seems to solve the issue. Thanks in advance for any help you can provide!

I can't figure out the trigger property (ScrollTrigger plugin) In this aparlax animation https://codepen.io/AlexandrTyurin/pen/KKjPZJX the values are incorrectly specified, for example: trigger: 'p1' or trigger: 'img1' instead of the correct values trigger: '#p1' or trigger: '#img1' However, the parallax itself works satisfactorily. In case I specify the values correctly using '#', the parallax does not work properly - for example the second layer (#img2 - image of a small rock on the right) starts to scale not from the very beginning but after about 20% of scrolling. Please help me to understand the problem.

Hi all, I'm trying to implement this effect in GSAP for tab so that my indicator of my active element flows smoothly, but I can't find an example. Maybe you can give me a hint? Thanks DEMO: https://codesandbox.io/p/sandbox/framer-motion-layout-animations-snxgv?file=%2Fsrc%2Findex.tsx&from-embed=

Hello community. I am facing a problem that I am trying to make oppositional content scroll on my page. The idea is that when I scroll down, my content on the left side scrolls down with normal behavior and the content on the right side from the last block to the first block. But the scrolling in my example is out of sync, my content on the right side scrolls like twice as fast as the content on the left side https://codesandbox.io/p/sandbox/opposite-gsap-9p4yh7?file=%2Fsrc%2FApp.tsx

Hi, I'm really stressed, I don't know if you can help me. I tried everything but for some reason the menu keeps moving with respect to the size of the window, what can I do? if I disable the trigger the menu does not move, and also the rest of the panels do not move, the only one that changes is the pined one. can you help me

Gsap Rotating Arrow in circle,and is stopping well at various points, But Now want to trgieer some js code on each that stopping points, So that i can glow or animate each points logo , when stop on it for some time Just want to show Different alert or consoles on Different points

Hey guys, I'm running into problems when i scroll down or up too quickly. It must be something quite simple, I'm missing. If you scroll down slow, then box 1 appears, and then as you go further down, box-2 appears. But if you scroll down quickly, past both triggers, box 1 doesn't disappear quick enough and all the boxes appear on top of each other. I'm using fromTo's and I've tried "immediate render: false" and "overwrite" but, have not been able to work out what is causing this issue. Hope that all made sense. I've made a minimal codepen demo to show what's going on. Any help is greatly appreciated. Cheers

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?

Hi, I'm looking for help regarding scroll trigger and items positioned fixed within a pinned section. I'm having an issue where I have a modal that needs to stay in window view once it's open, but it looks like it's being positioned relative to its pinned parent and I'm able to continue scrolling as normal. Hoping someone would be able to help me out!

I am new to learn in GSAP , Can any one help me to solve this issue, I want to start my light when my fan start, Both need to be same scroll start and scroll end. Here is my code gsap.registerPlugin(ScrollTrigger); gsap.to("#fan", { scrollTrigger: { trigger: "#fan", toggleClass: 'active', scrub: true, start:"top 85%", //when top of fan passes 75% viewport height end:"bottom 45%", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, perspectiveOrigin: "center 100vh", ease: "none" }); gsap.to(".lamp", { scrollTrigger: { trigger: ".lamp", endTrigger: ".footer", toggleClass: 'lampMove', scrub: 1, markers: true, start:"top top-=850", //when top of fan passes 75% viewport height end:"bottom top", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, });

Hi! I'm struggling with horizontal scroll implementation. The main goal is to change default vertical scrolling to horizontal and based on actual position, background opacity which is fixed and on center of my screen. In image below I tried to visualize it Based on codepen, I've created my implementation with gsap + scroll magic. Unfortunately I couldn't achieve smooth scrolling with it, so result isn't satisfied me. Here is a example of how smooth scrolling could looks like. https://codepen.io/Faelivrinx/pen/MWaOaVv I was trying use that code with scroll magic and implementation of horizontal scroll below, but there was a lot of weird artifacts via scrolling. I'd like to give up with scroll magic and use only gsap, but I could't figure out how to properly implement it. I need to track scrolling, where background image (fixed position) have to change opacity depends on visible section. There is any option using gsap to achive it? I'd be grateful for some examples

With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it. My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds <script type="text/javascript" gwd-events="handlers"> window.gwd = window.gwd || {}; gwd.scaleCTA = function(event) { TweenMax.to(redCTA, 0.5, { scale: 1, ease: Back.easeOut.config(4) }); }; </script> I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. Files are attached. Greensock GWD SVG Test.zip

Hello, I'm a newbie, I'm working on a push menu, but it doesn't trigger menu item animation on the first click. I need some help Thank you!

I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You

Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary

Hi, any help would be great right now. http://codepen.io/Ryan84/pen/aBBVWg?editors=1010 I don't want to fade on the numbers but instead run a timeline I have built for each number. these are included in the JS. They look like this: 1 http://codepen.io/Ryan84/pen/zooKZK?editors=1010 2 http://codepen.io/Ryan84/pen/JbbRXE 3 http://codepen.io/Ryan84/pen/xRREVR 4 http://codepen.io/Ryan84/pen/qqqaNr 5 http://codepen.io/Ryan84/pen/MbbjjW 6 http://codepen.io/Ryan84/pen/XNNjNd?editors=1010 At the moment when point 1 is clicked im saying fade on number one and hide all others. Ideally I want this to run when clicked:(instead of a fade on) var NUM1Timeline = new TimelineMax({paused: true}); NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18) .from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1,},0.0) .from(".shd1", 6, { opacity:0,}, 0) .from(".blk10", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); Any help would be really appreciated. Kind regards, Ryan

Hello. Been playing around with the ScrollMagic Tutorial but it's not giving me the results I want. Is there a simple method to trigger a GSAP animation sequence once the banner scrolls into the viewport?

Hi, I'm new at JS and would appreciate if someone could take a look how can i start the animation auto on web page load? I tried to implement trigger at the end but it did not work. $(tTog).trigger("click"); I think this is the key part of code: $(tTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('inTo'); if ($(this).hasClass('inTo')) { fullIn.progress(0); fullIn.restart(); } else { fullIn.reverse(); } }); All code: var sun = $("#sun_3_"), cloud1 = $("#cloud1"), cloud2 = $("#cloud2"), cloud3 = $("#cloud3"), gauge = $("#gauge"), wheel = $("#wheel"), city = $(".city path"), tTog = $("#top-toggle"), sTog = $("#side-toggle"), bkFar = $("#bk-far"), bkMid = $("#bk-mid"), but1 = $("#button1"), but2 = $("#button2"), controls = $("#controls path"), mult = [controls, bkFar, bkMid, city, extras], body = $("body"), extras = $(".extras path"); TweenMax.set(wheel, { transformOrigin: "50% 50%" }); TweenMax.set(city, { visibility: "visible" }); //animation that's repeated for all of the sections function revolve() { var tl = new TimelineMax({ repeat1: -1 }); tl.add("begin"); tl.to(sun, 15, { transformOrigin: "50% 50%", rotation: 360, repeat: -1, ease: Linear.easeNone }, "begin"); tl.to(cloud1, 10, { x: -110, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cloud2, 10, { x: -70, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cloud3, 10, { x: -50, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); return tl; } var repeat = revolve(); //bring it in function cityIn() { var tl = new TimelineMax({ paused: true }); tl.add("in"); tl.from(tTog, 3, { rotation: -30, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "in"); tl.staggerFrom(city, 0.75, { y: -50, scale: 0, cycle:{ x:[300, 100, 200], opacity:[0.5, 0.3, 0.2, 0.8], rotation:[50, 100, 150], }, transformOrigin: "50% 50%", ease: Back.easeOut }, 0.02, "in"); tl.staggerFrom(extras, 2.5, { x: 300, scale: 0, transformOrigin: "50% 50%", rotation: -30, ease: Elastic.easeOut }, 0.1, "in"); tl.from(bkFar, 2.5, { scaleY: 0, opacity: 0.7, transformOrigin: "50% 100%", ease: Circ.easeOut }, "in"); tl.from(bkMid, 2.5, { scaleY: 0, opacity: 0.7, transformOrigin: "50% 100%", ease: Circ.easeOut }, "in+=1"); tl.from(gauge, 2, { rotation: 180, transformOrigin: "50% 50%", ease: Bounce.easeInOut }, "in"); tl.from(gauge, 1, { rotation: 0, transformOrigin: "50% 50%", ease: Sine.easeIn }, "in+=3"); return tl; } var fullIn = cityIn(); //side toggle perspective function perspective() { var tl = new TimelineMax({ paused: true }); tl.add("per"); tl.from(sTog, 1, { rotation: -30, transformOrigin: "100% 50%", ease: Circ.easeInOut }, "per"); tl.to(bkFar, 1, { y: -30, scaleY: 0.8, opacity: 0.4, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "per"); tl.to(bkMid, 1, { scaleY: 1.6, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "per"); tl.from(gauge, 0.5, { rotation: 60, transformOrigin: "50% 50%", ease: Bounce.easeInOut }, "per"); tl.from(gauge, 1, { rotation: 0, transformOrigin: "50% 50%", ease: Sine.easeIn }, "per+=0.5"); return tl; } var side = perspective(); //button hue function hued() { var ch1 = "hsl(+=110%, +=0%, +=0%)", tl = new TimelineMax({ paused: true }); tl.add("hu"); tl.to(mult, 1.25, { fill: ch1 }, "hu"); tl.from(gauge, 2, { rotation: "-=70", transformOrigin: "50% 50%", ease: Bounce.easeOut }, "hu"); tl.to(body, 1.25, { backgroundColor: ch1 }, "hu"); return tl; } var hue = hued(); //button saturation function saturation() { var ch2 = "hsl(+=5%, +=2%, -=10%)", tl = new TimelineMax({ paused: true }); tl.add("sated"); tl.to(body, 1, { backgroundColor:ch2 }, "sated"); tl.from(gauge, 2, { rotation: "-=100", transformOrigin: "50% 50%", ease: Bounce.easeOut }, "sated"); tl.to(mult, 2, { fill:ch2 }, "sated"); return tl; } var sat = saturation(); $(document).ready(function() { Draggable.create(wheel, { type: "rotation", bounds: { minRotation: 0, maxRotation: 360 }, onDrag: function() { fullIn.progress((this.rotation)/360 ); fullIn.pause(); } }); $(tTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('inTo'); if ($(this).hasClass('inTo')) { fullIn.progress(0); fullIn.restart(); } else { fullIn.reverse(); } }); $(sTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('s-pers'); if ($(this).hasClass('s-pers')) { side.restart(); } else { side.reverse(); } }); $(but1).on('click', function(e) { e.preventDefault(); $(this).toggleClass('a-s'); if ($(this).hasClass('a-s')) { sat.restart(); } else { sat.reverse(); } }); $(but2).on('click', function(e) { e.preventDefault(); $(this).toggleClass('a-h'); if ($(this).hasClass('a-h')) { hue.restart(); } else { hue.reverse(); } }); });

I'm trying to customize my Mailchimp validation Upon successful form validation, a 'thank you/almost finished' overlay is revealed with .show(), but i wanted to animate how it appears with GSAP. How can I call/trigger a GSAP animation from this mc-validate.js ? if (resp.result == "success"){ $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').css({"width": "80%", "padding": "3% 5%"}); $('#mc-embedded-subscribe-form').each(function(){ this.reset(); }); }); Thanks so much.

i can set up a trigger area and get it to work, but if there are more than one draggable elements on a page then moving one item using the trigger area move both items together, things i have tried that have not worked trigger area as class (div header) only having one div having a trigger property setting two unique ids for trigger areas loading the div separately any ideas of what else I could try???

Just finished making these two short codepens to demonstrate. This Draggable has a separate drag handle for the drag item, and on release it scales the entire drag item up. If you click on the handle while it's scaled up, I want the item to shrink back to it's normal size only while you are dragging. However, I can't figure out how to make it stay under your mouse where you actually clicked the handle. codepen 1 - instantly scale-down: http://codepen.io/anon/pen/VerJdJ codepen 2 - animate scale-down (this is what i would prefer if possible): http://codepen.io/anon/pen/JGOQYZ I thought maybe while scaling, if I could change the transform origin to where the mouse pointer is that would fix it, but unfortunately there are other coordinates in the application that rely on the transformOrigin being 50%, 50%. Is there a way to do this? Outcome: 1.) The item shrinks but is no longer under your mouse pointer. Even attempting to relocate it manually seems wonky (see codepen and other things I have tried below) Expected Outcome: 1.) the item shrinks and remains attached at the same offset to the mouse (appearing to scale at your mouse point, as if your mouse point were the origin) Things I have tried: 1.) in the onDragPress, I attempted to get the the mouse coordinates within the drag target's container and instantly relocate the item to those coordinates. That results in bazaar behavior. 2.) I've attempted calling myDraggable.update() before and during setting the scalethe scale animation, and onDragMove Any help is appreciated, thanks a lot in advance! Also, let me say: TimelineLite and TweenLite are some of the most incredible libraries I've used. Pushing my company to purchase a member license.

I have some draggable items that are overlaying. When I press on one of them it gets to the top because of the zIndexBoost. This is great. But I was wondering how I can only let a specific (item 3 from 11) to be on top by clicking a button outside the draggable space. Is this possible?

I have multiple elements that are being used as the trigger under one class. For example, the "dragHandle" class is my trigger: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> This is fine when it is first initialized. All three will drag the "draggableLayer." The problem is, I am dynamically adding more "dragHandle" elements, and they are not seen as triggers after Draggable has initialized on page load. I.e: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <!-- these 2 were added after page load, but don't work like the others do as a trigger --> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> I have tried disabling (and killing) and then enabling the Draggable after adding the the additional trigger elements, but that hasn't worked. Is there a way to destroy and reinitialize the Draggable? Or maybe another way to make it see the additional trigger elements I am dynamically adding? Thanks!

Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before

Hi guys, I am working on a drag and sort thing with draggable and i have an issue that i can't find a way around it. Actually it looks like a bug. Items are in an unordered list so they are all identical in terms of child elements and class names. Draggable seems to work find with a class selector. Here's a code pen with just a simple setup. There is no drag trigger. http://codepen.io/ap-o/full/CEHBo But, once i pass a trigger selector everything goes wrong. Try to drag the little black box. http://codepen.io/ap-o/full/qfKtm Thanks in advance for your time *Apo