Search the Community

I want the car to move after the bicycle has reached its end. (How to trigger a 2nd scene only after the 1st scene is completed ) Thank you in advance

hey guys, i'm new to GSAP & I'm not quite sure what I'm doing wrong here. the desired effect is a fade in when the menu opens & a fade out when it closes, but for some reason i can't get the fade out part to work. here is a link to my codepen. i suspect i'm making a pretty dumb mistake. here's my js: var root = document.documentElement; var body = document.body; var pages = document.querySelectorAll(".page"); var tiles = document.querySelectorAll(".tile"); for (var i = 0; i < tiles.length; i++) { addListeners(tiles[i], pages[i]); } function addListeners(tile, page, menu) { tile.addEventListener("click", function() { animateHero(tile, page); }); page.addEventListener("click", function() { animateHero(page, tile); }); } function animateHero(fromHero, toHero) { var clone = fromHero.cloneNode(true); var from = calculatePosition(fromHero); var to = calculatePosition(toHero); TweenLite.set([fromHero, toHero], { visibility: "hidden" }); TweenLite.set(clone, { position: "absolute", margin: 0 }); TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); body.appendChild(clone); var style = { x: to.left - from.left, y: to.top - from.top, width: to.width, height: to.height, autoRound: false, ease: Power1.easeOut, onComplete: onComplete }; TweenLite.set(clone, from); TweenLite.to(clone, 0.3, style) function onComplete() { TweenLite.set(toHero, { visibility: "visible" }); body.removeChild(clone); TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); } } function calculatePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0; var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0; var clientTop = root.clientTop || body.clientTop || 0; var clientLeft = root.clientLeft || body.clientLeft || 0; return { top: Math.round(rect.top + scrollTop - clientTop), left: Math.round(rect.left + scrollLeft - clientLeft), height: rect.height, width: rect.width, }; } the part that is actually changing the opacity for the element i want is TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); and TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); but obviously i'm misunderstanding what's going on here. any help is greatly appreciated.

I created this demo which shows a slider with a preloader. The GSAP slider is completely out of sink and doesn't slide on time. How can I load the images and the slider together? It would be nice to have this function working together nicely. Also the fading on the images are a bit glitchy . I might have used to many alphas.

Good morning, I'm making a project with Angular 5 and I've imported GSAP along with TimelineMax but I can't seem to get CustomEase to work. The terminal doesn't give me errors but when I load the page in the browser I get the "Error: CustomEase is not defined" Can someone explain me the exact procedure to import and use CustomEase? Maybe I'm missing something.

Hey there, I'm posting as I received some great advice with my animation before. The goal is to have the car follow the route, and it seems to work perfectly on mobile. The pertinent lines of code are below, and shown in action in the codepen .set("#Car", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50}) .to("#Car", 7, {bezier:{values:MorphSVGPlugin.pathDataToBezier("#CarPath", {align:"#Car"}), type:"cubic", autoRotate:90,},ease:Linear.easeNone}) However on chrome mobile the linked codepen should produce the car doing doughnuts on the grass area offroad. I'm wondering if anyone can help me identify the code causing it. Hopefully you can replicate the issue as a couple of friends couldn't reproduce in on their devices. Thanks for taking your time to read my post. -Tom.

Hi, I tried create similar animation in right top which you can see in the picture from this website ( https://waaark.com/ ). In CodePen is my animation. Their animation start from bottom to top but my from all sides to middle. Thank you for your advice.

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 working on something like a full screen sections with a big menu that scrolls to left/right depending on the section but I can't get it right. Basically, when the first section ends I want the menu to translate to left and when I scroll up I want it to translate back to right. How can I achieve this? It's something like this http://en.leningrad.io/

Hi there! I am making a png spritesheet animation. I have an animation existing of 7 frames which I want to animate back-and-forth. So: from frame 1 to frame 7 back to frame 1 again and back. Example: 1,2,3,4,5,6,7,6,5,4,3,2,1,2,3 etc. I tried reversing with "yoyo:true" but i cant quite get a seamless experience as you can see from the Codepen. The animation goes back to frame 1 before getting into yoyo. I would love some advice from you. Any advice would be appreciated!

Hi, I have a text slider than has two alternate text slides animating in and out within a container, and this code is animated with GSAP (Codepen link provided). I want it to trigger with a forEach function, because I have a couple of instances of this same effect on a page. So I set up a basic forEach function that will trigger the animation as it scrolls into view, but when I use this method to invoke the sliders() animation function, I get all sorts of unexpected behaviour. In my if/else statement when i just do a basic test line (i.e. item.style.background = "green";) it works, but when add put the sliders() function call in it all goes a bit haywire. Does anyone know what is happening? Or what the best solution would be? P.S if you want to see the intended behaviour of the animation, if you comment out the forEach section and re-comment in the slider() function call you'll see what the animation is meant to look like. P.P.S Any help would be hugely appreciated. function sliders () { var timerbar = document.querySelectorAll(".timerbar"); var tl1 = new TimelineMax({repeat: -1}); tl1 .from(timerbar, 2, {scaleX: 0, ease:Power0.easeNone}) .staggerTo(".js-stagger-1", .5, {y: -30, opacity: 0}, .2) .staggerTo(".js-stagger-2", .5, {y:0, opacity: 1}, .2) .to(timerbar, 0, {scaleX: 0}) .to(timerbar, 2, {scaleX: 1, ease:Power0.easeNone}) .staggerTo(".js-stagger-2", .5, {y: -30, opacity: 0}, .2) .to(".js-stagger-1", 0, {y:30, opacity: 0}) .staggerTo(".js-stagger-1", .5, {y:0, opacity: 1}, .2); } // sliders(); // FOREACH TRIGGER ON TEXT SLIDES var triggerBox = document.querySelectorAll('.one-col.js-scroll-trigger'); function scrollTrigger() { triggerBox.forEach(function(item){ var boxPosition = item.getBoundingClientRect().top; var boxPositionPercent = (boxPosition / window.innerHeight) * 100; if (boxPositionPercent <= 100) { // 100% equals bottom of viewport sliders(); } else { // somehow kill the function } }); } window.addEventListener("scroll", scrollTrigger);

Hi guys been trying to make an animation for work where there is an image that goes from left to right with a clipping path to make the image have some sort of cut on the top. My problem is that it doesn't work on safari but somehow works on every other browser even firefox. I linked all the assets needed in the same folder to make the animation. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{clip-path: url(#clip1); position: absolute; top: 0; left: 0;} #svg-defs {position: absolute; width: 0px;height: 0px;} </style> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> </head> <body> <svg id="svg-defs"> <defs> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </defs> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" src="bg_01.jpg" width="160" height="600"/> </div> </div> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> var start = 0.1; var trans = 0.3; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); tl1.from('#mask1', trans, { x: -170,y: -35,ease: Power1.Out}) tl.to([tl1], start, "sequence", "-=0.45") </script> </body> </html> That was the original code. I made the animation slower and tried all i can to fix it on this code but some reason the only way it seemed to work is if i constantly resized the browser. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{ /* clip-path: url(#clip1); */ -webkit-clip-path: url(#clip1); position: absolute; top: 0; left: 0; } body{ width: 200px; height: 800px; } #myAd{ width: 200px; height: 800px; } .svg-defs {position: absolute; width: 0px;height: 0px;} </style> <!-- <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> --> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> function resize(){ console.log("tick"); window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){return setTimeout(f, 1000/60)} // simulate calling code 60 requestAnimationFrame(function(){ console.log("requested") }) } function main(){ // TweenLite.ticker.useRAF(false); // TweenMax.lagSmoothing(1000, 16); var ad = document.getElementById('myAd'); var mask1 = document.getElementById('mask1'); var img = document.getElementById('img1'); function update(){ console.log(img) // console.log("tick"); // window.dispatchEvent(new Event('resize')) } setInterval(update, 1000); // TweenMax.ticker.addEventListener("tick", update); var start = 0.1; var trans = 5; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); var mask1 = document.getElementById("mask1"); var clip1 = document.getElementById("clip1"); var ad = document.getElementById("myAd") tl1.from(ad, 10, { x: 0,y: 0 }) tl.from(mask1, trans, { x: -170,y: -35,ease: Power1.Out}) // tl1.from(mask1, trans, { // x: -170,y: -35,ease: Power1.Out}) // tl.to([tl1], // start, // "sequence", // "-=0.45") // TweenMax.ticker.removeEventListener("tick", update); } </script> </head> <body onLoad="main();" onResize="resize();"> <svg class="svg-defs"> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" class="" src="bg_01.jpg" width="160" height="600"/> </div> </body> </html> TweenMax.min.js mine_testing for browsers.html

POST RESOLUTION EDIT: See Zach's comment below for a more modern approach to this problem. ---- Hi there. I have a responsive site where I want the content to stagger reveal as the user scrolls. The issue I'm having is that on load, the first few items (depending on screen height) are above the trigger and therefore just animate in together as opposed to staggered. Is there a way to have it so that the content that loads immediately staggers, and then the remaining elements animate like normal on scroll via ScrollMagic? ScrollReveal has a pretty good example of what I'm going for, with content staggering in on load, followed by then animating the lower elements in on scroll. Thanks!

Hello guys. My Draggable object: Draggable.create(document.getElementById('el'), { minimumMovement: 50, type: 'y', onDragStart: function() { this.minimumMovement = 1; this.type = 'x,y'; }, onDragEnd: function() { this.minimumMovement = 50; this.type = 'y'; } }); I have default minimumMovement and type properties. When Drag starts I want to change this properties and when drag ends I want to set this properties to the default values. But It doesn't works. Can you help?

RotationY not working in IE but run good in chrome . i can Door close

Hey everyone, thanks in advance for your time. I've searched the forums for common solutions, but i'm a bit too new to JS to translate the more complicated ones into my simple task. I'm currently trying to get the animation in the provided codepen to work with the included mouseover feature correctly. If you try and mouseover while the animation runs, you'll see that the text elements fail to tween in by the time you mouseleave. I've searched the forums for solutions, but i'm still pretty new to JS so i'm rather dense as to how to use the isActive() function, which I assume would need to be used to prevent the mouseover working until all the intro elements have tweened in. To replicate this, try to mouseover straight away on the provided codepen, and you'll see that the text fails to appear from the intro animation. I've annotated the codepen, but here's the mouseover part. var wwdtransition = new TimelineMax({paused:true}); wwdtransition.to ('.screenobject',0.5,{y:300, autoAlpha:0}) .to('#playbutton', .3, {autoAlpha:1},"-=.2"); ; //mouseover functions $(document).on("mouseenter", ".col-md-12", function() { wwdtransition.play(); }).on("mouseleave", ".col-md-12", function(){ wwdtransition.reverse(); }); Thanks again for your time, i'm really enjoying using GSAP, and with a solution to this, I imagine I can just copy + paste it to replicate the effect in future work.

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

So I have been having tons of fun with GSAP for the last month doing animations for an Mobile App Idea I've had for some time. I've used TweenMax and TimelineMax to create some really cool animations with SVGs in a hybrid mobile app using the ionic platform. I've searched the internet and have found lots of help getting started (especially in these forums) but I am not finding anything on battery performance. I ported a minimal version of my app over to my Iphone 6s Plus and was testing it. Everything was working great but then I realized that my battery life was draining fast. I mean 5% in 1 minute. I looked at the diagnostics in Xcode and it was because of the heavy GPU usage. I am going to try using TweenLite and TimelineLite for all those animations that I can but will that decrease battery usage? What have you guys done in your apps to decrease battery usage with GSAP? Or am I using the wrong technologies for what I want to accomplish? Thanks ahead of time!

I have a lot of SVG stars that i'm trying to animate. The first time it looks very nice, up to the part where it repeats. It starts at the original position but I would love to make it look like stars are raining from the left to the right infinite times, any tips? I have added a Codepen URL

Hey there, happy new year first of all I am a bit confused with an animation i tried to achieve... i basically want to have each image separately animated and not all of them together...i tried to loop over all elements but its still animating all images together...would i need a timeline or is the approach completely wrong? const who = { trigger: [...document.querySelectorAll(".slide")], image: [...document.querySelectorAll(".slide img")], init: () => { who.trigger.forEach(element => { element.addEventListener("mouseover", who.animateOnMouseEnter); element.addEventListener("mouseout", who.animateOnMouseOut); }); }, animateOnMouseEnter: () => { console.log("animateOnMouseEnter"); who.image.forEach(element => { TweenMax.to(element, 0.25, { y: 35, ease: Power1.easeOut, repeat: 0 }); }); }, animateOnMouseOut: () => { console.log(" animateOnMouseOut"); who.image.forEach(element => { TweenMax.to(element, 0.75, { y: 0, ease: Bounce.easeOut, repeat: 0 }); }); }, debug: () => { // }, destroy() { // } }; who.init();

Hello again, and a late happy new year. mi_cky

codepen

Is there a way to animate children #staggerFrom in a react component which has received children as props.children ?

Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?

I need to create a animation, I made a slinky demo in css that suit perfectly but is not a gsap build and I need it animated. I'm trying to replicate the same but I'm a bit far away. Could anyone help me to create this slinky animation? It should open up. Slinky demo My demo

I have this tween1 that should should work on click and then reverse in case I scroll back. My tween doesn't work, the click doesnt play and so the reverse doesnt work, so: -on click toggle active which will make the f active will have tween1.reverse() //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL var tween1 = new TimelineMax(); tween1.to(".click-element", 0.3, {className: "+=active", x: 500, paused: true }, 0) .to('#section-2', 0.3,{className: "+=darkblue", paused: true }, 0) $(".click-element").on("click", function(e) { $(this).toggleClass('active'); tween1.play(); }); var scene1 = new ScrollMagic.Scene({ triggerElement: "#section-2", offset: 50 }) .on("leave", function() { tween1.reverse(); }) .setClassToggle("body", "darkblue") .addTo(controller);