Search the Community

Hi, I created a simple pen just to show you the issue I am having in my real project and is related to the transition-delay because I need the animation starts only when the mouse stays in the element the desire time and not before, with CSS is easy because the transition-delay is the one for the job but I don't know how to do the same using JS/GSAP, do you have any idea? In the following example you can see that if you pass your mouse over the orange div, the animation will be triggered only if you stay for more than 0.5s so you can like move your mouse over it and the animation will not be triggered but this is not happening with the blue one because if you put your mouse over the div and you moved out before the 0.5s, the animation still will be triggered.

Hello, I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. Now my issue is, I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that. I don't want a smooth scroll when the user clicks on part1 or part2. <div class="tabs"> <ul class="tab_click"> <li class="current"><a href="#part1" >Part1</a></li> <li><a href="#part2">part2</a></li> </ul> </div> I need a smoth scroll when user click on the below anchor tag. <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> Would you help me out in this issue?

Hi all, I am trying to get into Bannertime and its a bit of a learning curve but can see the benefits. I am trying my current banner timeline setup to work with it. In the Bannertime example this is how the animation is called and animated. /** * Animation timeline. */ Banner.prototype.animate = function () { var _this = this; function loop() { _this.timeline.gotoAndPlay('start'); } this.timeline = new TimelineLite({ onComplete: loop }) .addLabel('start', 0) .add(TweenLite.to(this.logo, 2, { autoAlpha: 1, scale: 0.7, delay: 1, ease: Elastic.easeOut })) .add(TweenLite.to(this.logo, 1, { autoAlpha: 0, scale: 0.4, delay: 1 })); }; In my previous banners I have a start animation function which adds in each frames of the banners. I separate them into frames to match a storyboard. I have tried the below adding in how I animate with the current Bannertime setup but it does not seem to be calling my startAnimation. I have also attached the whole original Bannertime file. Any help is appreciated I would like to still have animation setup but within Bannertime. /** * Animation timeline. */ Banner.prototype.animate = function () { var _this = this; function startAnimation() { timeline = new TimelineMax({ repeat: 1, repeatDelay: 3 }), timeline.set( banner, { autoAlpha: 1 }) .add(frame1(), "+=0.0"), timeline.timeScale(1), console.log(timeline.duration() + "timeline duration") } function frame1() { var t = (new TimelineMax) .fromTo(this.tablet, 2, { top: -64, autoAlpha: 0 }, { top: 0, autoAlpha: 1 }) .to(this.model, 2, {autoAlpha: 1}, "+=0.0") return t; } }; Many thanks, Chris banner.animation.js

I'm forked pen from jonathan https://codepen.io/jonathan/pen/NqZPwd So I'm need to create image animation on hover and on mouseleave reset image to default state. Now animation works well on hover and stopped on mouseleave, but image doesn't reset to default. So, how I can achieve that? Ideally, I need the same image hover effect like in this site https://www.juliebonnemoy.com/ (project's images after clients list) Thanks

Hello everyone! I just started using the GSAP library a few days ago and I am having an absolute blast! However, I have been struggling to achieve this fade-in effect for a page I am building (check it out here). The idea (just like in the codepen that I linked and the actual page) is to have the page fade-in from above when the DOM is loaded. Initially, I just added a fromTo Tween, then I added the window.onload function and inserted the code in there. Both "solutions" failed, as the content appears and then the animation procs. I wanted the animation to proc as soon as the DOM is ready. I am assuming the solution is simple, though, I only have a basic understanding of JavaScript and the GSAP library so I cannot seem to solve this. Any input?

Hi all! I'm working on finding the "best way" to approach animating the width of an object using the current implementation of GSAP TimelineMax paired with ScrollMagic: https://gist.github.com/jodriscoll/bda71b0245776294779cc1f9573186cd As most of you may know, animating the width of an element does not leverage the GPU, causing a reflow of the DOM, which is bad for performance, can break with bad JavaScript, reduces the 60hz/fps target, etc., etc. Unfortunately, I noticed the way the TimelineMax animates an object's property is through transform: matrix3d(). Which in turn, prevents the explicit usage/designation of transform: scaleX() to alter the width to/from through the TimelineMax().to properties. A summarized snippet of where I'm managing this configuration can be seen below: // ... const ScrollLines = new TimelineMax() .to( animate.down, 1, { x: animate.neg, y: animate.pos, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) .to( animate.up, 1, { x: animate.pos, y: animate.neg, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together"); // ... Actual question: Is there a way to alter the width of an element while still utilizing the core matrix3d calculation in TimelineMax? You can see the current implementation of this animation on youcanwa.org, or view the demonstration here. Any suggestions or help would be much appreciated!

Hey guys! I'm relatively new to GSAP, and I've search the forums for image glitch effects on hover to no avail. I'm looking to make an images on the page glitch on mouse hover similar to the effect on the text in the codepen. Is this possible with GSAP? Thanks in advance!

Hi all, I would like to know how to get this result, or do I have to look in the documentation to make animations like this developer ? http://eric-huguenin.com/ tanks you verry much :)

Recently was trying to replicate the above codepen in a react component with gsap and the animation completely fails, it doesn't even start or trigger. Can someone help me look for bugs? The codesandbox link is here : https://codesandbox.io/s/402ov4lyr7 Please Help.

Hi Guys, first Time, when i clicked on greenbox, it show correct position, But when i move it to another position then clicked it again. it show wrong position. pls help me to figure out..

Hey there! First of all I've got to say GSAP is the most amazing animation library the web has to offer, so thank you GreenSock for the great work ! Back to the issue at hand, I've noticed an odd behavior when it comes to SplitText and the line splitting feature (could also be the case for chars and words) : as you see in the codepen that I forked from the actual GreenSock's demo, when you are splitting one element, the splitting is made inside that element, BUT if you are splitting several elements, the splitting is made outside and actually wraps the element (which is, I feel, the logical behavior). See screenshots* attached if you can't see the codepen. How do you feel about that? Is it a normal behavior to you? Having different splitting behaviors gets tricky when animating lines of copy that come from a CMS, as the number of lines that you feed SplitText with may vary… *Screenshots :

Moving an existing es6 animation project from Webpack 3 to Webpack 4 I'm facing a weird phenomenon according to the _gsTransform object when I move from 'gsap' to 'gsap/all' imports. Maybe it's the very high temperature here at the moment, but I can't really get my head around why this is... At the moment unfortunately I can't find the time to create a small project to show you guys, but if I can find the time later on I'll setup one. If I can't fix this with 'gsap/all' I'll stick with 'gsap' on this project for now and fix it later, but it would be great if maybe by chance anybody faced the same problem and could point me in a direction. The thing is that by running the webpack development server on the project everything works like it always did. Also when I move all greensock imports from 'gsap' to 'gsap/all'. But as soon as I let webpack create a production build and run the build from the dist on my local server, suddenly it won't run because the _gsTransform object I use to get a position of an svg-element is not there anymore, so it can't read x and y from it. At first I thought it could be the treeshaking thing which could be different between development and production. So I included all gsap modules I use in a constant, like the examples on the greensock website. So like: import { TweenLite, TimelineMax, Linear, Sine, Back } from 'gsap/all'; const uses = [TweenLite, TimelineMax, Linear, Sine, Back]; But to my surprise that didn't solve the issue: the _gsTransform object just isn't there on the DOM/SVG-element on the production build. Which is there and working fine when running a development build and running from there, or running from webpack-dev-server. I know webpack 4 does some things differently when mode is set to production, but I can't find a reason that something could cause to prevent the _gsTransform to be on the svg-element on production builds. I also switched off uglifyjs and all, so this cannot be some strange renaming thing. In the end I even made both development and production using the exact same stripped config, but still only the development build works and has the _gsTransform object. To me this doesn't make any sense so far and I'm out of ideas now. Anybody here perhaps knows if there is something extra I need to do, or maybe import from 'gsap/all' to make _gsTransform work and available on production builds? To be clear: using imports from 'gsap' everything works on production builds too, the problem is only there when importing from 'gsap/all'. It seems like some needed part of greensock is not make it after treeshaking and I needed to import something extra from the lib which I didn't needed to import before, when I was importing from 'gsap' (and the full package came with it, because there was no treeshaking). But even then I think it's strange that the development build doesn't have this problem with 'gsap/all'... crazy Again, if I can't find some solution today I will stick on this project on 'gsap', so it's not a grand big of a deal, but I'd rather switch. Thanks!

Hello, I am using Greensock animation for smooth scroll clicking on the menu. I have three pages which are `menu.php, index.php, terms.php`. Now I am on `index.php` page and there is no issue with scrolling if I clicking on the menu then it's targeting the right id. No issue on the index page. Now I am on `terms.php` page from there If I click on the about menu then it's not redirecting on the id. I am getting the URL like `http://localhost/test-menu/terms.php#contact` URL should be displayed `http://localhost/test-menu/index.php#contact` Hope you all understand my issue. Would you help me out in this? In the `menu.php` page, I added my menu code which is <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> In the `index.php`, I added the code which is <?php include('menu.php'); ?> <section id="about"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="services"> <h2>Service</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="contact"> <h2>Contact</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/plugins/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> In the `terms.php`, I added the code <?php include('menu.php'); ?> <section> <h2>terms</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> GSAP smooth scroll script /** Smooth Scrolling Functionality **/ $(document).ready(function() { // Init controller var controller = new ScrollMagic.Controller(); // Change behavior of controller // to animate scroll instead of jump controller.scrollTo(function(target) { TweenMax.to(window, 2, { scrollTo : { y : target-65, // scroll position of the target along y axis autoKill : true, // allows user to kill scroll action smoothly }, ease : Cubic.easeInOut }); }); // Bind scroll to anchor links $(document).on("click", "a[href^=#]", function(e) { var id = $(this).attr("href"); if($(id).length > 0) { e.preventDefault(); // trigger scroll controller.scrollTo(id); // If supported by the browser we can also update the URL if (window.history && window.history.pushState) { history.pushState("", document.title, id); } }; }); }); **Css** ul{margin: 0;padding: 0;list-style: none;} ul li{display: inline-block;margin: 10px;} section{min-height: 500px;}

Hello, I am trying to scroll the box. Like when user scroll the page from the top then my box will scroll bottom to top and if scroll the page from bottom to top the box will scroll from top to bottom. I know it's confusion so I am sharing you the reference website http://www.xn--entreprenrsgatan-uwb.se/ . In this website ( check out the image first http://prntscr.com/jqor17), You can check the black box, When you scroll from the top then that black box animate from bottom to top and if you scroll from bottom animate top to bottom on the same position. I don't have any idea how to achieve this using scroll magic. Would you help me out in this?

I want to animate the splitting of a product image when the user scrolls to the section. i.e. When a user scrolls down and enters the product image section, I want to trigger the animation of revealing the different layers/composition of the product. Like it is done here (scroll down to the second section after landing page): https://simbasleep.com/ Any suggestions?

Hello @GreenSock Jack or somebody else who could help met with this, For a while now I'm using webpack together with the gsap npm package and uglifyjs. I keep things up to date and so far everything was working fine, until today. After updating the gsap package from 1.20.4 to 1.20.6 suddenly uglifyJs starts complaining. I only updated gsap, so only the gsap module has changed. I just found out gsap 1.20.4 works fine, and the problem starts with gsap 1.20.5: After searching for a solution I found that gsap 1.20.5 contains es6 code, which is not there in 1.20.4. This is what I see in TweenLite (1.20.5): const gs = _gsScope.com.greensock; export { TweenLite as default }; export const SimpleTimeline = gs.core.SimpleTimeline; export const Animation = gs.core.Animation; export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope; export const EventDispatcher = gs.events.EventDispatcher; UglifyJs here complains about the constant destructuring on the forelast line which it doesn't understand: 'Name expected' But even if it did understand it and continues its process, I would had a problem, because my project should output es5 and uglifyjs comes after transpiling. So this untranspiled es6 code is causing problems with uglifyJs in the webpack workflow. Also the minified versions of gsap 1.20.5 seem to have untranspiled es6 code now. I can't set UglifyJs to be on es6, because I want my project to output es5 code and uglifyJs is after the transpiling, like it should in webpack. My own projectcode is written in es6 and I use webpack babel to transpile to es5, but Babel is not transpiling the node_modules folder and I really like to keep it that way and think of that as best practice. I see most of the gsap code still is written in es5, so my guess would be something went wrong compiling the lib. But the above es6 lines (maybe more?) are in all gsap folders (gsap, gsap/umd, gsap/src/minified and gsap/src/uncompressed). Did something go wrong? Or am I missing something here? Thanks in advance!

Hey guys, I feel like calling kill() on a Draggable instance should probably clean up after itself and reset the DOM element it was invoked on to it's pre-initialization state. Currently it leaves 'user-select: text' on the inline style attribute of each element, overwriting any default user-select settings that may have been previously defined (inline or css). See line 903 in Draggable.js _setSelectable = function(elements, selectable) { var i = elements.length, e; while (--i > -1) { e = elements[i]; e.ondragstart = e.onselectstart = selectable ? null : _emptyFunc; _setStyle(e, "userSelect", (selectable ? "text" : "none")); } } I can of course manually clean up the style in my implementations (which is what I currently do) but I think it would be much cleaner if Draggable would keep an internal reference to any style properties it is going to modify and reset the element to that reference after the Draggable instance is killed. Sorry for being nitpicky. Keep up the great work! Jonathan

Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .

Hello i have question. How to setTween to many different elements?? var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_1", {top: "-100px"}) // the tween durtion can be omitted and defaults to 1 .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller);

I'd like to see if there's a way to load GSAP through JavaScript and then create a timeline after it's loaded and ready. I tried to use fetch + then to achieve this, but I think there's something I'm doing wrong here. fetch('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js') .then(function() { var tl = new TimelineMax({repeat: -1}); tl.to("#square", 1, {x: 300}) .to("#square", 1, {x: 0}) ; }); Th error I'm receiving: Uncaught (in promise) ReferenceError: TimelineMax is not defined I'm not sure if this is just a JavaScript error or an error with how GSAP needs to be loaded.

Hi, Anybody can help me achieve the slider effect this firm is using? antoni.de I am new to using greensock. Thank you in advance! GH

I'm currently testing out a basic animation on our company's WordPress site just to see if I can get some animated SVGs working. The image is an SVG and I've used a few simple tweens, drawSVG and TimelineLite. It's nothing fancy or special I'm just trying to get it to work. I've attached the CodePen link to this topic. The animation in there works fine, I've also uploaded it onto the site (link below), as well as the JS files needed to run it. Everything works perfectly on all browsers, except Internet Explorer, which is the one most of our users use so is the most important. http://dev.on-trac.co.uk/wp/safe-work-packs-svg-test/ The image in question is just below the first piece of text on a white background. You may need to reload the page to see it run as I haven't configured it to run on scroll yet. The animation JS script is within <script></script> tags in the HTML of the page. I'm having a couple issues with IE which I'll list below. - The animation running is very inconsistent. Sometimes it runs, most times it doesn't, no errors show up in the developer console. It just shows the normal SVG with no changes, can't figure out why. - When it does run, the first few steps of the timeline run fine, until it gets to the two orange lines (line 13 in the codepen), these don't show at all. Then when it gets to the blue lines(line 15 + 17), these run incredibly slow/choppy. I just can't firgure out why it isn't working in IE, hopefully some of you can shed some light on the situation. Thanks in advance

Hey there, we are actually searching for support (as freelance work) in developing some kind of "special website menu". Just to name some stuff that is involved: Canvas Animated SVG HTML, JS, CSS Greensock ReactJS JSON Based Data If you would like to offer us your work, feel free to contact us - just reply or send us a message. We will send you further information then on a personal way. About Us: We are an Web-Development Agency, based in Essen, Germany. We are working for over 100 customers in Germany and western Europe. Our focus is on state-of-the-art web and mobile solutions for our customers. We are also specialized on Content-Management-Systems (TYPO3).