Search the Community
Showing results for tags 'tweenmax'.
-
Hi, I'm a beginner with tweenmax and I was playing with basic animations. Instead of doing the animation with "animate" I wanted to try to animate a circle with the yoyo effect, but the animation is not central. Thanks in advance for advice.
-
Hello, my goal is to do this animation seamless - but i have no idea where i have to add the possible overlap parameters for the repeat. please enlighten me. -
Basically, Im trying to get an animation (#dd-heading) to trigger when the user hovers over nav button(.dropdownmenu-button) that triggers dropdown with animation in it.... but it only seems to trigger the first div and the rest dont trigger. Similar to this - https://www.open-wear.com/ //gsap animation of elements in dropdown navigation var toggle=0; var tldropdown = new TimelineMax({paused:true}); var items = $('#dd-heading'); var list = $('.dropdownmenu-button'); tldropdown.staggerTo(items, 1.5, {x:20,opacity:1,delay:.5}, .5) .addPause(null,function(){ if(toggle)tldropdown.play(); } ) .staggerTo(items, 1.5, {x:20,opacity:1}, .5) function over(){ tldropdown.restart(); toggle=0; } function out(){ tldropdown.play(); toggle=1; } list.hover(over, out);
-
All, In the Draggable docs at https://greensock.com/docs/Utilities/Draggable there is reference under the "onThrowComplete" property to a "onThrowCompleteScope" that can change the scope of what is being passed to the onThrowComplete function. "By default, the scope of the onThrowComplete is the Draggable instance itself, but you may define an onThrowCompleteScope if you prefer, just like any other TweenLite or TweenMax." Presumably this can be used in the same fashion as the TweenLite/Max onCompleteScope, onStartScope, onUpdateScope, etc. settings. Maybe I'm missing the obvious, but I cannot for the life of me find any documentation or examples of using this mechanism - apart from passing it an empty object as '{}' - anywhere, including the TweenLite / TweenMax documentation, and would greatly appreciate a simple example of what the format for defining a scope to be passed to one of these functions looks like. Any suggestions or a pointer to any documentation I've missed would be hugely appreciated. Specifically, I want the onThrowComplete "this" context to refer to the target element, rather than the default draggable instance. I know I can get the target from within the draggable instance, hoewever I'm to have a single onUpdate function which I would also be calling directly based on other (non-draggable) actions. Many thanks!
-
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
-
Hey everyone. I am building a website using a drag and drop menu where a new page is opened when an element is dragged and dropped on one of the menu pages icon. It's been working alright for a while until today. It just takes me to the new page but page content doesn't load. This happens only in firefox. Everything works perfectly on all other browsers. I keep getting this error on firefox - NS_ERROR_FAILURE: TweenMax.min.js:15. I'm confused as at this point , I don't know how to move forward. Can someone help?
-
I'm trying to expand an element's height from 'auto' to '100%', and reverse it. By just using `to()` percent height, there's a slight jolt in height due to percent-to-pixel rounding. So in order to circumvent that, there was another post that suggested to predetermine the heights before starting the tween. The two issues I'm having right now are: Timeline is compiled ahead of time, but I thought the whole point of a property function was that it was executed during runtime (deferred). During reverse, I would like to do the opposite, swapping the starting and ending property values, but the property function is not executed during runtime. What is the method for calculating runtime start values? I saw some posts suggesting to create a new timeline, but that seems heavy handed since one would have to cache the playback position, recreate the timeline, resume from the cached position in reverse, and possible do this multiple times if the user decides to change the window size or hide other elements affecting the height value during other parts of the tween. Is Timeline at all capable of runtime start values? Here's an excerpt of the timeline: let startHeight let toHeight return new TimelineLite({paused: true}) ...other tweens .to(this.elSpinnerWrapper, tweenDuration, {...tweenProps, opacity: 0}) .set(this.elSpinnerAndPickerWrapper, {height: '100%'}) // <--- This is the element to expand/contract .call(() => toHeight = this.elSpinnerAndPickerWrapper.offsetHeight) .set(this.elSpinnerAndPickerWrapper, {height: 'auto'}) .call(() => startHeight = this.elSpinnerAndPickerWrapper.offsetHeight) .set(this.elSpinnerAndPickerWrapper, {height: startHeight}) .to(this.elSpinnerAndPickerWrapper, tweenDuration, {...tweenProps, height: () => toHeight}) // ...other tweens Any suggestions would be appreciated. -
Hi all, My issue here is a bit two-fold. I've been making steady progress on this project, but I've hit another wall. The first issue is that since I've added my Timeline for the second animation, the animation opens immediately on browser load. The second issue is that my Timeline doesn't seem to be running the .fromTo() I've defined for it. So what I'm attempting here is to define the first animation, define the second animation, toggle the first with click, toggle the second with timeline onComplete of the first animation, and then to be able to reverse the whole sequence on click again. I've made a mess of my code I think and I'm having a hard time piecing it all together. I feel slightly bad about having so many questions/requests for assistance. If I'm asking an inappropriate amount or types of questions please feel free to let me know, I wouldn't want to violate any forum rules. Whatever you can help me with I will greatly appreciate and I thank you in advance. -
Hi all, I need to reverse my div's animation to its original state on the click of the link. I've been reading that TimelineMax is the only way to do this? Will they work together in this context/is there a way to do this with just TweenMax/am I stuck in the woods? The reverse() function in TweenMax doesn't seem to really do anything besides stopping the animation from working altogether. I've tried using TweenMax.to in a separate instance that selects my .link class for the addEventListener( 'click', animate); to return the div to its former properties but that hasn't worked either. You can see my attempt in the pen. Any tips? Thanks in advance!
-
Hi all, So I am attempting to make it so my child grows into its parent. I have my wrapper div's margins set to 5vw so that I have a perfect border all around my browser. The issue seems to be when I click the div and the animation starts, it ignores the margins set there and expands past the wrapper's containment field. What am I not seeing? Thanks in advance!
-
Hello Greensockers, Here's another gifani-inspired greensock animation The animations of the triangle are identical in the "use" copies. I tried to slightly modify the animation of the copies. But the code only partially works. (in the code after / * this -> * /) Attached gif animation shows what the result should look like. Is my approach a possible way? Or do I have to animate all triangles individually? Please leave your two cents
-
Can you tell me anything about FastDOM and if GSAP uses something similar or if you have ever heard of it, etc? I personally haven't heard anything about it until recently when someone recommended it to prevent some layout thrashing (something you see commonly with parallax animation where you are trying to move something based on scroll position, etc, etc). Whatever it is doing or whatever it does, it seems to boost performance. Do you know anything more about the techniques it uses and does GSAP do something similar? different? better? or are there some drawbacks to the process that FastDOM is using? etc. https://github.com/wilsonpage/fastdom
-
Using: TweenMax 1.14.1 The TweenMax docs say that setting TweenMax.defaultEase sets the default easing on TweenMax tweens. As far as I can tell, it doesn't work. Instead, it seems, I need to set TweenLite.defaultEase. (I've also noted that the default for TweenMax.defaultEase is undefined, but the default for TweenLite.defaultEase is Power1.easeOut.) It seems like this is a bug either in the docs or in the code.
-
Hi all, one mask - two rects - one timeline - the help of use that simple it can be
-
Hey guys, my simple Tweenmax.set () is going on chrome and opera but not on edge IE11 FF56 have checked three different ways - alway the same result. can anyone point me the right direction ?
-
Hi there, Im essentially trying to create some cool rotation effect animations. I have linked my codepen. I want the top box to roll back out another way when you click '.top'. Roll our to the right would be perfect. I'm also trying to reduce my code footprint.. any help as to how I could possibly use more variable or a loop etc would be greatly appreciated. Cheers
-
I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
-
Hey, When animating an unknown number of elements like so: var timeline = new TimelineMax({repeat:-1}), items = document.querySelectorAll('.item'), startDuration = 20; for(var i = 0; i < items.length; i++) { var myDelay = (i * 0.5); animate(items[i], myDelay); } function animate(item, delay) { var a = TweenMax.to(item, startDuration, { rotationZ:'360', ease:Linear.easeNone, repeat:-1 }); timeline.add(a, delay); } What is the best way to modify the duration/speed of an individual tween? Thanks
-
I have this tween that repeats infinitely: var sparkleblink = TweenMax.staggerTo(".confetti", .5, {ease:Linear.easeNone, opacity:.2, repeat:-1}, .01); but I want to stop this animation after a certain point. I have a TimelineLite() which calls a function after the last animation: var tothebox = new TimelineLite(); tothebox.to(".scrollnotif", .1, {opacity:0}) // ** other animations here** // .to(".scrollnotif", .1, {opacity:1, onComplete:killthis}); Then I have that function that's being called onComplete: function killthis(){ sparkleblink.kill(); } Not sure if I'm missing something or what. Advance thanks for whoever is going to help!
-
I have a website in which I'm trying to load the TweenMax tag; https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js Everytime I try to do it, I get this: TweenMax.min.js:16 Uncaught TypeError: Cannot read property 'greensock' of undefined at Function.<anonymous> (TweenMax.min.js:16) at check (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at new c (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at t._gsDefine (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at TweenMax.min.js:16 at TweenMax.min.js:16 But, when I load the TweenLite tag (https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js) before hand, the TweenMax tag loads just fine. The website I'm trying to add this to is: http://www.pergunteaumamulher.com/ (it's in Brazilian portuguese). You can try to add the tag in the console to see the behavior I'm pointing out. Have you ever seen something like this? I believe it might be the same problem we have seen in here: Has it ever being addressed? -
Hi So i have multiple dom elements that i animate along an svg path ... for now ... looping clockwise works ... it loops forever but if i call reverse() .... it acts like a rewind() ... if it repeated twice ... it will reverse only 2 times .. not forever var timeLine = new TimelineMax({ repeat: -1, paused: false, yoyo: true }); timeLine.add(TweenMax.to(arrPeople[i], totalTime, { bezier: { type: "cubic", autoRotate: true, values: points }, force3D: true, repeat: -1, yoyo: true, ease: Power0.easeNone, onUpdate: function() { if (this.target == arrPeople[0] && !initialized) { let children = timeLine.getChildren(); if (children[0].time() >= totalTime - totalTime / people.length / 2) { timeLine.paused(true); initialized = true; } } } }), (i + 1) * totalTime / people.length); this is the code i use to create the timeline and the tweens any sugestions? thanks
-
I'm trying to export a timelineMax animation as mp4 video using phantomjs. Everything works fine, but the animation speed is different on phantomjs. It's running too fast, 10-second animation completes in 2 seconds. If I timescale to 0.2, it works. Framerate is set to 24. Does anyone have an idea on what's happening? Thanks.
-
I am getting a strange problem, i am animating a simple DIV along a Bezier path using scrollmagic. Everything is working fine, however when i reach the end of the animation, The pinned element which it is in, does a big jump. I have troubleshooted for hours and tied it down to the transition of when the animation is running it is using Translate3D property, then when it finishes, it quickly jumps to matrix property. It would appear that this switch in properties causes my page to jump. Is there anyway to stop the matrix property being applied, because the object stays where it is supposed to if i use translate3d to the last coordinates of the animation.
-
Hi there, I am getting this error when I am opening this url in mobile and dragging bow to left." Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)". Here is codepen url '
