Search the Community

Hi all., Great day. When we're using the smooth scroll script the functionality is not working fine as we expected. As per your demo in codepen (https://codepen.io/GreenSock/pen/KKXZOyZ), we tried to include the height with a static value like (height: 9000px;) reference - https://prnt.sc/6K97ufrgm4CE . Shortvideos reference, https://recordit.co/hdjCQztnJM and https://recordit.co/3At0AA5qWD Unfortunately, we can't include the constant value here, the height will differ for each page. So, we tried to get the entire body height from the script. We haven't got any luck on this. Now, we are facing the height calculation methods only. So, anyone please help us to complete this without calculating the height? Thanks in advance

Hi, I used the "clipPath" property for animation, but it seems incorrect after call gsap.to(...).seek(....). From my point of view, instead of inset(0 0 42.5 0) it should be inset(0 0 42.5% 0) There is the minimal demo, please check the console. Thx.

Hi, I'm new to this area of gsap, I was looking for projects that had Threejs and Gsap as tools. Reference: https://architect-opinion.art I was thinking of doing something similar/prototype for the above reference. His concept of "camera" following a path that was "modeled", "generated", and having some interactions within that "trip". But I don't know where to start, and I don't know the "names" people give to this kind of programming or modeling inside threejs and Gsap. Could you help me find the "names" (3d scene, scene interaction) of these codes and where possibly they are done in threejs or gsap?

Hello, I am new to greensock animation platform. I wanted to experiment a horizontal scrolling navigation in the middle page. I am using Scrolltrigger gsap and locomotive scroll. everything seems to work well since am literally copying from greensock documentations. once i set pin and scrub to true, everything stops, extra space is also created for the vertical scrollbar. please, any help will be much appreciated.

Hello, I have created this pen and this is working fine. I just want to start and end pinning with the slider. Please help me out with GSAP & ScrollTrigger Kind Regards.

Hi GSAP Gurus, I am having an issue where I am trying to replace classes and it's not working. $(element).addClass("red").removeClass("grey"); //Works //Not working gsap.to(element, { duration: 2, className: "+=red", stagger: 0.5 }); I have provided a CodePen Demo also.

See the GIF for what i'm trying to achieve. How can I do this with Greensock where you use a mask to remove text in sliding transition but not effect the background. Not sure if this is possible but any advice or ideas would be appreciated.

I'm just getting started with GSAP and so far it looks great. I've hit a difficulty using it with ScrollMagic. I'm playing a GSAP timeline to animate an SVG of a van exhaust, when the van being ing the middle of the screen is detected by ScrollMagic. In the pen scroll down to find the van and see the animation. Then scroll up and you should see the animation reverse before stopping. I can see how this behaviour would be desirable in some circumstances, but I wish to know how to avoid it here. Thanks

Hi, I have a side menu that is present on a page after page load. You can then slide the menu off the screen by either scrolling 1px or clicking the 'X' on the menu. When the menu has disappeared from a view a 'Menu' button shows and if you click on it, it brings the slide menu back in. Once again to complete the cycle you can get rid of this menu by either clicking the 'X' on the menu or scrolling 1px up or down. There's a bug in the code though which I found accidentally, which is purely of my making and i can't seem to get rid of it. Problem: When the menu has been closed and all you have is the 'Menu' button, if you click this button and accidentally scroll as the menu slides back in, the Tween that is fired by the 1px scroll hijacks the click Tween and it slides off again. Is there any built-in functionality in GSAP to prevent one timeline firing whilst another one is animating? (effectively making it null for the duration of the other animation). I've been going around in circles trying to solve it with setTimeOut(), but I don't think this is the correct way to approach it. The GSAP code is below and there is a pen to illustrate the problem here http://codepen.io/emilychews/pen/PpXaNV Any help / ideas would be awesome. Emily jQuery(document).ready(function($){ // global var for menu container var $menuContainer = $('.menu-container'); TweenMax.set($menuContainer, {x: '-100%'}); //set the menu off the screen before sliding in on page load TweenMax.set('.showMenu--button', {autoAlpha: 0}); // Button that appears after the Menu slides away // slides menu in on page load function bringInMenu(){ var menuIn = new TimelineMax(); menuIn .to($menuContainer, .9, {x: '0%', ease: Power1.easeOut}) .from($menuContainer, .5, {skewX: '2deg', transformOrigin: 'bottom right', ease: Power1.easeOut}, '-=.5') .to('.downarrow', 1, {y: -20, repeat: -1, yoyo: true, ease: Power1.easeOut}); // animated down arrow }; bringInMenu(); // Close menu with the 'X' on the menu itself $('.menu-x').on('click', function(){ var closeOnClick = new TimelineMax(); closeOnClick .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); }); // Close the menu on scroll var scrolled = false; $(window).scroll(function() { if ( !scrolled && $(document).scrollTop() > 1) { var closeOnScroll = new TimelineMax(); closeOnScroll .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); // reveals menu button scrolled = true; // update the scroll state } }); // ClICK FUNCTION TO BRING BACK MENU $('.showMenu--button').on('click', function() { var desktopMenuClick = new TimelineMax (); desktopMenuClick .to($menuContainer, .3, {scaleY: 1, transformOrigin: 'top right', ease: Power1.easeIn}) .to($menuContainer, 1, {x: '0%', ease: Power1.easeIn}) .to('.showMenu--button', 1.3, {autoAlpha: 0}, '-=1.3'); scrolled = false; // resets scroll state to false }); }); // end of jQuery

Dear community, I got to code a one-page website. It got quite a lot of sections and SVG elements with a lot of elements. As I want to animate them, I thought I got to include them into my html document. Doing so creates a massive file with way to many lines to work productive inside the document. Googling I found the `<use>` tag to reference groups or shapes, but it seems like its not suitable to reference a whole external .svg file. So thats my question: - How do you handle HTML files with a lot of SVG code? - Can I somehow use the external SVG files for internal use? As a tweak, I know that SVG for Everybody https://github.com/jonathantneal/svg4everybody creates a polyfill by adding external SVG files into the DOM for IE9+. Can I somehow "always enable" this, even if I know that its not the most appropriate way? To keep it simple: Its a "big thoughts low budget" project, so it does not need to a the professional solution at all and only has to support the newest browser (while IE9+ would be good). Thanks in advance for any suggestions and let me know if you got any questions, Marian.

Hi Guys Need some help in creating a page transition similar to the one in the following link http://apres.no/ Suggestions of how this may be achieved or even if it is possible in GASP. Thanks in advance Bri

Hi All, Starting from 0 here. My boss has asked if a GSAP HTML5 Banner that use Smartphone Accelerometer is possible. The idea would be that i multilayered image with a foreground, mid-ground and background would 'move' with the tilt on a smartphone. Can anyone point me in the right direction? Thanks for any help, Phil

Hi I'm working on a loader, using bezier to draw a circle. But following math I got a straight line at the top of my path. my tween is basically TweenMax.to(pillole[e],5, {bezier:{ type:"cubic", values:[{x:0, y:r},{x:-c*r, y:r}, {x:-r, y:c*r}, {x:-r, y:0},{x:-r, y:0}, {x:-r, y:-c*r}, {x:-c*r, y:-r}, {x:r, y:-r},{x:0, y:-r}, {x:c*r, y:-r}, {x:r, y:-c*r},{x:r, y:0}, {x:r, y:0}, {x:r, y:c*r}, {x:c*r, y:r}, {x:0, y:r}], autoRotate:false},repeat:1,ease:Linear.easeNone,yoyo:false}); any thought??? cheers marco

I'd like to tween a CSS value, say a div background color, through multiple colors based on scroll position -- as if I could set up a gradient of colors (for instance a spectrum/rainbow). My thought was to set up tweens on a TimelineMax and then check on each scroll update as to percentage scrolled and seek to that percentage position on the TLM. I can do the grunt work, but I'm curious to know whether using TLM in this way would even be possible -- any help appreciated --