Search the Community
Showing results for tags 'gsap'.
-
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
-
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.
-
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
-
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
-
codepen
-
Is there a way to animate children #staggerFrom in a react component which has received children as props.children ?
-
I need a click event on (section-2) which will do the following: - Page body changes background colour (adding class="darkerblue").- The main element (clickable) to move across x:500, scale:1.5. - if I click the main element it will revert all. -If I scrollback to previous scene(section-1) it will revert all. From line 93, where I started making the scene for section-2
-
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);
-
I'm trying to build a project where I will be using different scenes and Tweens. Firstly I'd like to fix the centering on my image. the image onscroll should move to the right. For some reason is not centered even though all the css are correct. what's the best way to set multiple scenes on the project?
-
Not sure why the image on section-2 doesn't center on scroll. I tried everything so far. It should appear from section-1, so with the offset, starts animating . What I'm I missing here? on leave should go back at the start on the left. new ScrollMagic.Scene({triggerElement: "#section-2",offset: -350, duration: $('#section-2').outerWidth(true)}) .on("enter", function(){ $("#anchor2").addClass('selected'); $("#section-2").addClass('animated fadeInUp'); var tl = new TimelineLite(); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .on("leave", function(){ $("#anchor2").removeClass('selected'); $("#section-2").removeClass('animated fadeInUp'); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .addTo(controller);
-
Hi I'm working on this robot animation (see Codepen) all was going swimmingly until it was pointed out to me some odd behaviours that were occurring in IE Edge. I'm having no luck debugging this and wondered if anyone could shed any light? Any help would be appreciated. Also frustrating, but something i'll probably work out eventually, on the second loop through (the second time the German box is picked up) the rotation of all the boxes is not right, i'm not sure why this is? Lastly, this is by far the most complicated timeline I have have attempted and i'm sure there are better/more efficient ways of achieving the same outcome. I'm always keen to learn so if there are any obvious GSAP features different structures I should be taking advantage of i'd appreciate the input. Many thanks in advance.
-
Hello, I have logo and content on my website. I am able to animate the logo and content on page load. I am using the scroll magic plug-in because when the user scrolls the mouse wheel than animate the elements. Now the issue is, My animation is working together, I mean I have to animate first content then I have to animate the logo. After complete, the animation logo than again I have to animate the content. I tried some code but not working. This is my task I have to animate the header content from bottom to top 70% linearly. then I have to animate logo 50% from top to bottom, and then cross. then again I have to animate the content bottom to top which is the last content. Please help me out with this issue.
-
Hello, I have one circle and I am using scroll magic. I have to scroll the circle with 360 degrees and after that circle will hide. I mean one it will cross the screen of the desktop that It will hide and then below content will display on the screen using the mouse wheel. Now my code is not working properly. I mean when I am scrolling the mouse wheel and circle start and end in the center of the pc and content also scrolling. I need when circle crosses the desktop screen than content should scroll. Would you help me out in this?
-
There seems to be a slight flicker once the animation is finished. This only seems to happen with HTML Videos. I was unable to reproduce the effect with other elements such as divs or imgs. Has anyone come across this issue before?
-
Hello, Maybe its a silly question but i was wondering the best way to get gsap into our project. Because i have paid the license, now i have a src/ folder with all the files. Before that i was using nicely the npm/yarn package for the gsap free version. But now i have to use the local ones ? This doesn't look the best too keep my gsap plugins updated. Am i suppose to check the web for new versions ? Or there is a way to load this "paid" plugins into my project as a npm package. Thanks in advance.
-
I'd like to say hello to everyone at the beginning. I'm a novice in JavaScript world and I have a question. I tried to create navigation for my first GSAP slider and I have no idea how to get started. I'd be grateful for all the tips. Regards, Novice
-
Hi Folks, Am trying to determine if there is any way to use Draggable in conjunction with jQuery's .on() method, or to achieve a similar result, such that any dynamically created element of a given class under a parent object will inherit the Draggable configuration. jQuery doc -> http://api.jquery.com/on/ I saw a previous conversation thread that referenced an add-in called waitUntilExists which has this approximate effect, but only for a single names element at a time(plus looks like it may no longer work since jQuery 3...) Any thoughts would be appreciated! -
Note: when you open the Codepen scroll down to the bottom Hello there! I'm a JS/HTML5 newbie trying to animate an IRC chat using HTML5/JS in Animate CC. My goal is to dynamically create rounded rectangles with text from the chat and load them onto the canvas from the bottom. New messages would pop up from the bottom of the list and push the other messages upwards. Currently, I have the WebSocket set up and listening to messages. When it detects a message it sends it to the queue where it checks if any animation is currently playing, then if not it generates a rounded rectangle and the message text and animates it coming up from the bottom of the screen. My problem now is, if I send another message, another instance of this rounded rectangle is created and animates on top of the old one. I tried instead pushing each object pair (the text and the rectangle) into an array and then accessing it from there, which works, however, I'm having a little trouble optimising it (I attached a codepen to demonstrate the effect I'm going for and the bloated spaghetti code) (and I don't know if this is the best way to do things). The messages would also need to fade out to the side after a certain amount of time, which would mean new messages need to start lower down again. So, I'm thinking maybe each message has some kind of timer that animates it being removed and removes it from the array so that newer messages can overwrite them? I'm not sure. Does anyone have any suggestions for how I could approach this? Any help would be greatly appreciated, thank you! EDIT: This was my attempt at iterating: (the main attached one is what I'm trying to achieve without manually specifying the Y position, as the height of boxes will be dependent on the size of the message). -
Hi guys! As you can see in my codepen i've applied a clip-path to a group that is holding a gradient circle element, which will in turn mimic a kind of reveal. My main question is do you guys know why or how I can have the element completely follow the mouse within the surrounding box? At the moment it seems as if the transform on that certain element is working in relation to the viewbox. Do you guys know how I can work around this or approach it differently? Thank you so much, Oliver
-
I need to scroll animation when the user scrolls the mouse wheel.Now animation is working on page load. I need content should animate on the scroll. First two articles is working but when I scroll it than animation is not working. I tried some code but not working. would you help me out in this? https://jsfiddle.net/Narendra2015/0gL8k79a/
-
The animation is not like I want, it should have a typical collapsing expanding experience. If you click the "Expand/collapse", you'll expand/collapse the content. It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation. Content should be pushed. console.log('click 1'); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0, ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,}); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); console.log('click 2'); TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,}); TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); Demo:
