Search the Community
Showing results for tags 'TweenMax'.
-
Hi ! It's me again.. Now I am trying to draw a SVG from what a designer gave me. But, I tried something very simple from the video and as you will see in the codepen, nothing happen... I don't know why, can someone help ?
-
Hi everyone, hope you are fine. I am getting better and better with scrollMagic / gsap but when I am thinking about doing something simple, it's always giving me a hard time. I choose to use ScrollMagic with GSAP because I have some sprite to use with a parallax effect. Instead of losing you with too many code lines, go straight to the point, here is my codepen demo : http://codepen.io/anon/pen/bdXqzw In this example you can see a simple square that change to position fixed with new background-color. The thing is, at the end of the scrolling scene, I want my square to go "slowly" (1seconde animation) at the left of the screen with animation. Then it has to stay "absolute" of section if you continue on scrolling down. But as you know, if you scroll back you are supposed to have your animation going back, and I am lost about it. Thank you in advance for reading my post and maybe help me !
-
I made a simple animation which works fine on desktop, but when viewed on my iPhone it staggers. It doen't run smoothly and doesn't do all the tweens it should. Can understand why this happens. I only use TweenMax as my external source. Somehow the phone won't accept all of it. Any idea what I can do to get this running smoothly on my phone? Thanks!
-
Hi everyone, hope you are fine ! I come today with a new question about tweenmax. I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item. Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function : TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)}); Sooo I have 20 images in my sprite for a width of 7960px. The thing is, when I am rotating while scrolling, I can't do something like : x: "+= scrolling value". If I am not in good proportions the animation is broken. But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object ! So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation! Do you have some idea or tips of how I can synchronize tweenmax with a scroll ? I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries. EDIT: here is a codepen I made. http://codepen.io/anon/pen/VLJWrX
-
Hi wonder if someone could help me. I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8. The issue is that on safari, when it rotates it seems to be missing one half of the circle. Have attached the PEN - Pen: http://codepen.io/sonamtsu/pen/xGoRzw Page: http://codepen.io/sonamtsu/full/xGoRzw/ Any help would be greatly appreciated. Thanks
-
..I would expect it would return the new value and not the pretween value. Please reffer to the codepen example. I am either missing something vey simple or very complex and surely nothing in beTween. Thanks lads -
$(document).on("mouseenter", "#numbers", function(){ TweenMax.to(footer_number, 0.5, { css:{fontSize:new_footer_number_fontSize+"px"}, textShadow:"2px 2px 15px rgba(145, 233, 0, 1)", color:"#91ff00", ease:Power4.easeOut }); }); $(document).on("mouseleave", "#numbers", function(){ TweenMax.to(footer_number, 0.5, { css:{fontSize:old_footer_number_fontSize+"px"}, textShadow:"0px 0px 0px rgba(0, 0, 0, 0)", color:"#d6d6d6", ease:Power4.easeOut }); }); am i doing something wrong?
-
I'm repeatedly animating an SVG path with TweenMax.to: function wink() { TweenMax.to($righthand, 0.4, { x: 60, y: -60, rotation: -120, ease: Power1.easeInOut, transformOrigin: 'left bottom' }); TweenMax.to($righthand, 0.15, { rotation: -90, yoyo: true, ease: Power1.easeInOut, repeat: 5, delay: 0.4, transformOrigin: 'left top' }); TweenMax.to($righthand, 0.4, { x: 0, y: 0, rotation: 0, delay: 1.25, ease: Power1.easeInOut, transformOrigin: 'left bottom', onComplete: function() { $righthand.css('transform', ''); setTimeout(wink, 5000 + Math.random() * 10000); } }); } even resetting the transform property in the onComplete function. As long as the window is open, everything is fine. Now, using the latest Chrome on Mac OS X, if you keep the animation running in a background tab for a few minutes, the path slowly starts creeping away - see the attached screenshot, the hand of the animal has somehow transformed into an obscene dongus. While funny, I'd love to know if there is a fix for this. Thank you!
-
Greetings! I have my first TweenMax doing everything i need, (including interaction with externals controls/buttons) but I'm drawing a blank as how to prevent it from 'autoplay' My relevant 1liner: var tl = TweenMax.to(point, currentSpeed, {css: { left: "95%"}, repeat:repeat, yoyo:true, repeatDelay:0, ease:Linear.easeNone}); ... so for example my 'pause' button works fine: $('#pause').click( function(){tl.pause();}); ... how do I make it start only when I press my $('#start') button? I figure I missed something simple, hence my apologies and thanks in advance.
-
Hi, So I have this code: var toggleInfo = function(){ var info = new TimelineLite(); $('.info-open').click(function(e){ e.preventDefault(); info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false}); info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false}); info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"}); info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"}); }); $('.info-close').click(function(e){ e.preventDefault(); info.reverse().timeScale(2); }); } And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.
-
in following tween I need to use a var instead of number in transform origin area. I did change the number with a variable but it's not working. TweenMax.to("#gallery", 1,{rotationY:GrotY,opacity:0, transformOrigin:"50% 50% zValue",ease:Power4.easeOut}); as you can see same job works for rotationY value.
-
I'm trying to create an interactive illustration that requires a bunch of coins to be flipped when a button is clicked. I managed to hack together something that works and builds a new timeline every click, but I can't figure out why the very last coin in the series won't animate. I'm new to GSAP and a javascript novice, so it could easily be something very simple. Any insights would be appreciated. http://codepen.io/misterjworth/pen/EjGrGL?editors=001
-
Hi everybody, I'm trying to animate an SVG (that I didn't create) for client project. It works well in Chrome and even Internet Explorer (9-11), however, I'm running into trouble with Firefox. The y positioning of the elements is completely incorrect, some parts move up instead of down and parts that should visually "stick" together end up shifted. http://codepen.io/anon/pen/zGMKPN Interestingly, I found out that if I use "yPercent:" instead of "y:" and adjust the values accordingly, the animation works as intended throughout all browsers. Take a look at this modified codepen: http://codepen.io/anon/pen/xGQEXr I don't feel comfortable using yPercent. On the one hand, it's not "semantically" correct in my view, because I actually don't need and don't want to rely on the elements' heights for just moving them around. And on the other hand, if I want to move two elements around that visually represent the back and front side of one single object, I have to find the correct percentage values for each of them, which doubles my work. (I should add that I will have to animate several similiar SVGs for the project.) I'm aware of the fact that the SVG could be cleaner (e.g. not using <use>, the various transforms and the viewBox attributes on the symbols...), but I want to avoid having to clean up and effectively rebuild every single SVG file. And apart from that, I would really like to know what causes these browser inconsistencies that GSAP isn't able to compensate and would be glad if anyone could come up with a way to fix it. Thanks in advance for any help Constantin
-
Hello Respectful GSAP community, I am trying to scale up a Fixed Action Button to achieve a special effect of Material Design but I have some frustrating problems which I do not know why these happen, first of all the scale animation that I am trying to achieve is very laggy on desktop Firefox (Latest version) and Mobile browsers (I have tried on iOS 8 safari and iOS chrome) as you can see in my Codepen example, Second, How could I make the first three steps of my Timeline to happen at the same time and then the forth step? Because Now steps other than the first one wait until the scale animation is finished and then start to act and I don't know why! I have just simulated the Scale part because only that is performing laggy! Regards and thanks in advance.
-
Hi, I have no idea why this is not working on my desktop or on my web server but works in Code Pen. I have the latest cdn and the js and css files all link fine. http://codepen.io/voguewebservices/pen/NqOdGY Thanks Allan
-
I'm trying to get an animation to use different property values every time it plays. I've put the values into variables and everything works fine using the default values the first time, but I can't figure out how to get the animation to read the new values that are created when you click a button. var jumpHeight = 100; var jumpTime = 1; var boxcolor = "#00ff00"; var jumpBox = new TweenMax("#redbox", jumpTime, {y:(-jumpHeight), backgroundColor:boxcolor, ease: Power1.easeOut, repeat:1, yoyo:true}); //called when you click a button function rePlay(){ jumpHeight = jumpHeight+24; jumpTime = jumpTime-0.1; boxcolor = "#0000ff"; jumpBox.restart(); } Is there a simple way to do this that I'm missing? This codePen shows a simplified version of what I'm trying to do. http://codepen.io/misterjworth/pen/bdjoLv (The actual project uses multiple tweens within a TimelineMax object that all reference the same variables)
-
Actually I am making a web app which part of it contains a touch swipe action in order to browse between different parts of a section in mobile devices of course, the elements which move after the user swipes will be dynamically added or removed; I have made a static version of this so far but I need to make sure it is capable of being dynamic, I have used hammer js for controlling swipe action and tweenmax js for handling the animation. My problem is that I do not know how to recognize which .chanel element is in sight so I can figure out which is the next one and which is the previous one (how to Pass that element to my timeline instead of writing too many timelines), Also I have to dynamically change my Timeline in a way that it sets the .chanel element left to -offset if its the previous one and sets to offset if its the next one for example. I hope I could describe my problem well. Thanks in advance.
-
I load a swf file in my application, and the swf have some tweens (TweenMax). The problem happens when I play and stop the object, like this: var swfloader:SWFLoader = SWFLoaderObject; //SWFLoaderObject is my swf loaded var tweens:Array = tweenMaxClass.getAllTweens(); for each(var tween:* in tweens) { tween.seek(0); //0 is example } swfloader.rawContent.gotoAndPlay(0); //0 is example The objects are out of sync, and can not correctly resume animations, either by stress processor or other problem. -
These are the 3 PNGS that have been provided below. I have attached the animation to be achieved with the above given images. Is it possible to do this with TweenMax or any other library from GreenSock as I have been asked to achieve this using greensock? Tired thinking of a solution for the same. I would be happy if anyone can provide a direction. sample animation.zip
-
Hi GSAP authors! I'm need help, i maked tweening engine, Animo.js (github.com/dalisoft/animo.js - 2 branch (v2 and master v1). I Highly optimized the performance, but i dont know why i can't tween smooth than GSAP. I have question, why TweenMax size too large??
-
Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.
-
Hi! I'm writing a plugin for a project I'm working on and I'm running into an issue where my plugin's init method is called twice when used in conjunction with TweenMax.from(). Is this by design or am I making a mistake somewhere? Consistently, the sequence of calls is init(), set(1), set(0), init(). Any insight you could give me on this behavior would be greatly appreciated. Thanks!
-
Hi all! Is it possible to disable animations in IE8? Basically, I've got a site with a ton of animations and in IE8 it's really struggling and the site will be much better off if I disable animations. I still need the results of the animations, just no tweening. Does that make sense? Cheers, Mike
-
this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible? -
Please Help Guide on this issue. Thanks in advance to those that pitch in Here's an example demo (still private) I'm creating to show how Draggable can be used to create an off canvas menu. http://codepen.io/grayghostvisuals/pen/569ffceac4b0c1b3958ade9bd189ad94 A couple issues I'm running into: 1. The red bg is to show the target region. I want the menu to allow drag actions to open the menu when a user's finger drags over the top of the document (not just a small portion of a region). The menu also hides completely when it's closed. The previous example linked in my demo from Carl's original pen had the menu showing 15 pixels when closed. Need some guidance on how to improve the current demo I'm building. 2. Links in the main document body are not clickable and I think I'm missing the explanation in the docs. Maybe some direction how to make these elements clickable so the menu swipe region does not negate those clickable items.
