Search the Community

Dear GSAP users, I found a codepen that reproduces exactly what I wanted to do, having an element following my mouth with the GSAP smooth feeling. But I was wondering why that code wouldn't work with the tweenlite library but only with the tweenmax library? Thank you in advance for your time. I'm sorry if the question is stupid, but I'm confused because the code it's using "tweenlite" as a function.

Basically what the title says....I'm not attaching a CodePen as it's more or less an API question I think... I've got a collection of `divs`in a circle shape. I collect these in an array and then TweenMax.staggerTo on all of them with yoyo:1 and repeat:1 so that they quickly tween back to how they were when they started. But I'd like the last one to remain in the tweened state, that is "yoyo" all of the elements except the last. What's the simplest way to do this? (If there is a way). TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true, }, .05).length; } // how to keep myArrayOfDivs[length-1] tweened? I thought of doing a staggerTo on all but the last element of the array (i.e., create a new array with all but the last element), setting a onCompleteAll on the staggerTo and then tweening the last element separately, but that didn't work, as I don't want it to start when all of the rest have tweened and yoyo'd, but for all to flow seamlessly as if it were one tween. Any suggestions welcome!

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 there, I am on the very first tutorial, trying to make a basic logo animate. So far, the logo does not animate at all. I loaded GS CDN and a custom javascript file after that, both before the </body> tag. In the HTML page, I added: <p><img class="radical-logo" src="images/HSDA-Annual-Meeting-2018/radical.svg" alt="its time to get radical" /></p> In my custom.js file I added TweenMax.to(".radical-logo", 3, {x: 80%, scale:2, ease:Back.easeOut}); I viewed source to be sure both the Greensock CDN file and the custom.js file were loading properly. The only css I've created in my custom.css file is the following, thinking that I want the logo to start small and get bigger: .radical-logo {transform: scale(.25); margin-top: 30px;} Any ideas why I cannot get this simple svg to fly?

I am unable to get the transformOrigin property to be centered within the object. It is being set to 0px 0px regardless of whether I have a 'transformOrigin' property defined or not. The codepen illustrates this issue: https://codepen.io/ron-itelman/pen/xzqMWN?editors=1010

Hi I am a UI developer and working for a company. I am developing a info website for my company and using Tweenmax plugin CDN. Should I need to buy a license for a single website(informative site not selling any products)? Kindly let me know. Regards Sachin

Hi, I am working on my site and since gsap 2.0.0 I have experienced very weird stuttering bug. Check the video below to see what's going on. Animations were playing flawlessly in gsap 1.x. There are no elements on the page that could cover those blinking areas. I am using simple TimelineMax and TweenMax calls, up to 4 at the same time. (opacity, color and x/y positions). Video: https://streamable.com/sjxrk Did someone have similar issue?

I am animating svg elements onto the screen with a simple opacity tween, however the elements look like they jump left 1px at the end of the tween, is there some properties I need to set to allow the SVG elements to tween on smoothly and without this weird jump? thanks in advance

I'm experimenting with tweenmax. What I would like to do is: 1. When the mouse passes on a text, you start to see the box where the video is. 2. When the mouse leaves the text, the video resets and hides itself. 3. The procedure is repeated.

Hi, I'm new in this world. I would have to recreate this animation: a div rotates to the right to infinity with a determined speed ... then at the click on a button the rotation is reversed also changing speed for a few seconds and then return to normal animation .... I hope I explained myself .. can anyone help me?

Hi Guys, my Name is Oliver. I am the developer of anivendo. A fast, modern and easy to use HTML5 Banner-Animation-App for Windows (Mac-Version will follow) which uses TWEENMAX. · No Coding Experience required! · NO COMPLICATED TIMELINE! anivendo animates your Banner Creatives very much faster than traditional HTML5 Animation Tools like Google Webdesigner, Adobe Flash, Adobe Animate CC, Adobe Edge Animate, etc… Why don’t you take a Look. We are currently searching for alpha-Tester! https://anivendo.com/ Update (03-23-2018): anivendo is now fully documented! https://anivendo.com/docs/ Questions, Bug Report and Improvement Suggestions can be made via anivendo Community Forum https://anivendo.com/community/ _ Cheers Oliver

Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect. Thanks!

Hi All, I've been learning PixiJS, and I love it, but for some reason my ParticleContainer color is not changing?. All I'm getting is black, please let me know your thoughts I've pasted my code below for reference. var tlColor = new TimelineMax({ yoyo: true, repeat: 999, repeatDelay: 0 }); tlColor.to(particleContainer, 3, {pixi:{tint:0x6fbb4c}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0x4ec7f2}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xe6df36}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0x4c9f91}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xf98331}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xde1272}, ease: Cubic.easeOut }); Thanks

Hi All, Hoping someone can help with this issue I'm facing. I am controlling the TimelineMax progress based on scroll position. Pretty simple, however I noticed that my tweens are running for the entire length of the page. This is because I am currently calculating the percentage with age-old `window.scrollY / (document.body.clientHeight - window.innerHeight)` What I need help with, is figuring out how to start & finish the animation when the `.tweener` div in my Codepen example enters the viewport, to when it reaches the bottom of the viewport. I also don't want to use the behemoth that is ScrollMagic Any help would be greatly appreciated! Cheers

Hello, I am novice, but i really impressed with this. I want to make product detail page having animations like this website: https://www.etq-amsterdam.com/store/product/men/low-3-timber/ When you click on product image, it will zoom it to full screen having pan effect. Also, when you scroll it, image will scale accordingly. I think they are using tweenmax, but i didn't able to crack it. Could you please help me with this? Thanks, Keyur

Hello guys, I am trying random circle movement with tweenmax but the circles moves very little , if I increase the value for movement it goes outside of container.Is it possible rearrange them within the container? The container is marked by red background. Is it possible to create a animation like this? http://revolve.pro/#technologies

Hello there, I'm new in Tweening... Does someone here know how to update Tween settings on window resizing when Tween progress is > 0 ??? I created an horizontal slider with ScrollMagic and Tweenmax and I tried to update dimensions and Tween settings on resize but even if I kill Tween, reset and refresh Scene it only works when Tween progress is 0... Thanks for your help ! Alex

<script type="text/javascript"> var t1 = new TimelineLite(); t1.staggerTo(".box", 0.1, {rotation:360, y:750}, 0.11); </script> hi I want to make non-stop motion so i added like this: t1.staggerTo(".box", 0.1, {rotation:360, y:750}, 0.11 ,repeat:-1); and it won't run. how can i solved this?

Hey people! I'm working with a TimelineMax timeline. I want to run an animation first. After the first animation I want to resolve a promise. Then later in a separate function I want to reverse this timeline animation After this animation I want to resolve a different promise. I'm not sure how to do this. Any advice?

Hello, I tried create background slider where slides are stretched on window height and width. Snaps work good because i tried something similar but only in smaller dimensions. I think the problem is in the distance. Which must drag the element so that the slider changes its position to the next snap. I searched solution how can i decrease this distance. But i didn't find something. Thank you for answer.

Hello, I am actually trying to achieve this animation effect using GSAP. https://tympanus.net/Development/ImageTransitions/index6.html In "other" option select example 4 so you can see what i'm trying to achieve. They have used css3 keyframe for this effect but i would like to make it using GSAP. Only thing is, each button has assigned one image in sequence.When I click on button 1, first image should be visible in image-wrapper with similar animation. Clicking on button2 replace image-2 and so on. Could someone help me with this. Thanks in advance.

how to repeat this kind of callbacks based animation, I cant repeat this entire animation, each tween start based on callback please answer this problem TweenMax.to(".div1",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div2",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div3",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div4",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){}}); }}); }}); }});

Hi, i'm building a demo for a card game and i got it working thanks to the amazing hints of the experts in this forum. I think i developed the hardest pieces and now i want to play with the timeline to make some animation happen at the same time. I already watched the good tuts and read the documentation about timelines but something goes wrong with this specific case. Please have a look here https://codesandbox.io/s/0v6p9z27n In the animation.js file at line 103 you have the animation that is fired when you press DEAL. The animation consists of 4 parts (line 113-116), if i put a label to the last two animation (to make them run at the same time) it stops working. Can you please help me with this issue? Thanks!

Hello! I am trying to build like a wave animation but using multiple elements, in the pen I left, there are 6 levels with some circles in each level. The current animation behavior is... each level of elements starts right after the previous one finish but the behavior I want to achieve it's like a fluid wave, so when the first level it's like at 50% of it's animation, the next level should starts and the same for the next levels, so a complete wave will be visible in the timeline and of course when the last level finish, the wave will start again. Can you help me with that please?

I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient. How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition? function pageScroll(e) { var clicked = e.currentTarget.id; if (clicked == "navWelcome") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"header"}, delay:0.3}); }else if (clicked == "arrow") { TweenMax.to(window, 3.5, {scrollTo:{y:"#aboutMeFull"}}); }else if (clicked == "navAbout") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3}); }else if (clicked == "navServices") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4}); }else if (clicked == "navPortfolio") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3}); }else if (clicked == "portfolioBut") { TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}}); }else if (clicked == "navContact") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#contact"}, delay:0.3}); } } for (var i=0; i<navBut.length; i++) { navBut[i].addEventListener('click', pageScroll, false); } for (var i=0; i<navItem.length; i++) { navItem[i].addEventListener('click', pageScroll, false); } document.querySelector('#arrow').addEventListener('click', pageScroll, false); //Landing Page $(function() { var xTo = 1.15*window.innerWidth; var yTo = 0.5*window.innerHeight; var rocketTween = new TimelineMax().add([ TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #arrow", 0.07, {opacity:0}) ]);