Search the Community
Showing results for tags 'tweenlite'.
-
Hello... I have this simple record where I get SVG id's and manipulate with them: $(window).load(function() { var HSCPsvg = document.getElementById("hscp"); var svgDoc = HSCPsvg.contentDocument; var JinJang = svgDoc.getElementById("JinJang"); JinJang.onclick = function (){ TweenLite.to(JinJang, 6, { rotation:360, transformOrigin:"center", ease: Power0.easeNone, repeat:10, }); }; }); TweenLite works correctly, but for one click only. This method I usually use with jQuery and it works for each click. How to change it please, so that the rotation will be executed for each mouse click on the selected element? Thanx
-
Hello all, I am newbie and just started to learn GSAP technology in my company. I have asked to create this effect using GSAP. I tried my best to find scrollTop of current message and fail to apply autoAlpha on it. Will you just check both images and can someone tell me how can I create fadein and fadeout effect scrolling up and down. I want to show current message with opacity 1 and last message with 0.5 and last second message 0.25 and so on. And when I scroll down messages opacity should change as per scroll. Please need someone early help to achieve this. Thanks in advance.
-
I am doing some fairly complex animations with TweenLite, that - in some cases - cause even a desktop browser to slow down considerably and animations become choppy. After playing with TweenLite.ticker.useRAF and TweenLite.ticker.fps I found a managable solution by reducing the framerate and increasing the duration of the animation. The resulting animation is much slower, but still smooth (which is what I want). Question: what's the best way to find out whether an animation is going to be choppy? I have implemented an onComplete function that compares the time it took to complete with the supposed duration. It just doesn't really help, because every animation is different and once the framerate is down and the duration multiplier up, both values will not be reset ever, even if a different animation allows for higher speed at a better framerate. What's more, the animation that triggers the downgrade, has been choppy already... I would like to start every animation at default speed and framerate and while it is being processed, monitor the real speed and adjust framerate and total duration as neccessary to make it smooth. How would I do that?
-
Hello, First of all thank you for your work on gsap (and forums), which is a library that I like to use I've always used TweenMax so I didn't have any problem with ES6 import before, but right now I'm struggling to use TweenLite through ES6 import. What I do is: import TweenLite from 'gsap/TweenLite' TweenLite is loaded in my bundle, no error is thrown, but this line does not work at all (no animation). TweenLite.from(this.$refs.animate, 0.2, { opacity: 0 }) If I do import only gsap (and not gsap/TweenLite), the animation does trigger properly, but because gsap refers to TweenMax, TweenLite in this example is in fact TweenMax which loads a bunch of things I don't need for simple animations: import { TweenLite } from 'gsap' // or import TweenMax from 'gsap/TweenMax' So what I am seeing here is that the animation works with TweenMax, but not TweenLite, when importing through ES6. Am I doing something wrong here when I import TweenLite? I have searched the web but found only this thread where Jack says that import TweenLite from 'gsap/TweenLite' should be working: (Using version 1.20.3) Thank you for reading!
-
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!
-
Depending on the user's interactions, there are times when a new `TweenLite.to()` target property is already reached, but the tween continues the full duration regardless. For instance: TweenLite.to(el, 5, {opacity: 0, onComplete: () => IMPORTANT STUFF}) Let's say the user interacted with something causing this tween to be called, but the tweened element already has an opacity of 0. I would think the tween would assume it reached it's target value and fire it's `onComplete` callback. But instead it runs through the full duration, which results in what is perceived be a pause in animation. I logged out the values via `onUpdate` and the values are indeed equal. I can think of a bunch of manual checks as a solution, but this is one of many animations that will run into this problem. Btw, the callbacks need to be fired, so I can't really bypass the tween. Is there a built in mechanism in GSAP to handle this? -
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.
-
I have this code when content load. And i have my .menu-content as a modal box. Position fixed, full screen with an inner scroll. And i have a bunch of anchor links targeting to a section block inside the .menu-content <a href='#section1'></a> <a href='#section2'></a> <a href='#section3'></a> <a href='#section4'></a> <div class='menu-content'> <section id='section1'>...lorem ipsum.....</section> <section id='section2'>...lorem ipsum.....</section> <section id='section3'>...lorem ipsum.....</section> <section id='section4'>...lorem ipsum.....</section> </div> I just want a click event in the link that scroll into that section. Something similar to this Codepen import 'gsap/TweenLite'; import 'gsap/CSSPlugin'; import 'gsap/ScrollToPlugin'; document.addEventListener('DOMContentLoaded', () => { let links = document.getElementsByClassName('menu-list')[0].querySelectorAll('a'); for (let link of links) { link.addEventListener('click', (element) => { element.preventDefault; var options = { scrollTo: { y: element.target.hash, autoKill: false, offsetY: 268 }, ease: Power1.easeOut }; var scrollbarContainer = document.getElementsByClassName('menu-content')[0]; TweenLite.to(scrollbarContainer, 2, options); }); } } But when i try in my project, the ScrollTo seems to jump from the Beginning (top of the screen) sometimes and then go to the target Then if i click before one ScrollTo ends, then go to the other element correctly. Thanks in advance
-
Hello, fellow GSAPpers! This is my first stab at GSAP (love it!) and I'm super-eager to get your input on whether I grasped some of the basics or just totally messed it up. What I wished to create was some scrolling magic where the user controls the position of a video using the scroll wheel . Very similar to what goes on at the top of apple.com/homepod (which also seem to use GSAPs Tween & Timeline. Please have a look and give any hints on how to make this even smoother and more compatible on all sorts of devices (iPhone seems to work pretty good though). One thing that bugs me is that this is 40 lines of code. Apple's example runs one for at least 400. What am I doing wrong? TOM
-
Hi I just trying out GSAP but the custom CSS plugin doesn't seem to work. What am I doing wrong? https://jsfiddle.net/tomeriksen/0nepf5u5/1/
-
Hi ! I'm trying to add a setTimeout on hover to avoid a bug when the mouse is going fast on links. I tried a simple setTimeout but nothing setTimeout(function over(){ TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"}) TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"}); TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut}); }, 200); and also with this code but didn't find to make it work... $(document).ready(function(){ var delay=200, setTimeoutConst; $('.thumb').hover(function(){ setTimeoutConst = setTimeout(function(){ $(".thumb").hover(over, out); function over(){ TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"}) TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"}); TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut}); } function out(){ TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut}) TweenMax.to($(this).find(".view_thumb"), 0.2, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut}) TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"0" , ease:Power2.easeOut}); } }, delay); },function(){ clearTimeout(setTimeoutConst ); }) }) If you have any idea I would be really glad. Thanks !
-
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? -
The example Codepen shows a text input whose label changes position depending on the input's `blur` and `focus` state. Given `TweenLite.set()` is used to initialise the position of my label element, what is the best way to get back to this position without repeating code? In my example, this is what I am currently doing; firstly, setting the coords of the label's initial position: const initCoords = { y: 62, x: 10 }; Then initialising the position using the coords: const initLabelPosition = () => TweenLite.set($label, { ...initCoords }); Then, when I need to toggle back I am again inserting the `initCoords` into a `TweenLite.to()`: const moveLabelInsideInput = () => TweenLite.to($label, animationDuration, { ...initCoords, fontSize: labelFontSizes.blur, ease }); I think I might be missing an easier way to do this. Is there a better way I can toggle back to the initial position created by `TweenLite.set()`? -
I have a button which starts an animation. What I want to do is restart the animation if the user pushes the button during an existing animation. The code below just stops the tween for a split second then continues the existing animation. myTween = TweenLite.to( circle, 1, { opacity: 0, attr: { r: 12, }, ease: Power2.easeIn, onStart: reset, onComplete: reset, onOverwrite: () => myTween .restart() } )
-
Please check the codepen link and could someone please help me to create "Tada" or "Flash" effect instead of "Shake" effect? Thanks in advance.
-
Hey Guys! I've recently discovered your awesome products and have been enjoying playing around with the examples. However, I've run into some trouble trying to implement it into my project haha. Yet confident this won't be a biggie for you guys. So , if it's not too much of a bother please take a look at the codepen attached to see what I mean. https://codepen.io/Raulito/pen/jmwXxp *Specifically, I keep getting the error 'cannot tween a null target' in the console , which stops all my other animations from running , when trying to use the CSSRulePlugin to target the :before pseudo element. *I've noticed that this error occurs and can be seen in the console both on codepen AND when doing local development without a server, but for some reason works when I'm developing it locally using XAMP. * Cheers, Raul.
-
I need to use TweenLite due to space limitations in the project (yay!) I suspect the TweenLite isn't working because of the Timeline... not sute really Any suggestions on how to yoyo and repeat with TweenLite? //working TweenMax version function flapWingsMax() { flapTl = new TimelineLite(); var wl = TweenMax.to("#wing_left", 0.1, { scaleY: 0.5, repeat: -1, skewX: 20, transformOrigin:"86px 104px", yoyo: true, onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenMax.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, repeat: -1, transformOrigin:"9px 87px", yoyo: true, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); } // TweenLite - NOT working function flapWingsLite() { flapTl = new TimelineLite(); var wl = TweenLite.to("#wing_left", 0.1, { scaleY: 0.5, skewX: 20, transformOrigin:"86px 104px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenLite.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, transformOrigin:"9px 87px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); function reverseTween() { this.reverse(); } function restartTween() { this.restart(); } }
-
Hi, I am using the scrollToPlugin to scroll text automatically when banner loads. I need the scroll to pause when mouse enters the area and resume when it leaves. I am a newbie that needs help. Like I said the text scrolls automatically when banner loads but when I mouseenter it doesn't pause. Here is a sample of the code that I am using to accomplish my goal. I used a console.log to make sure everything is firing but still the scrolling text doesn't pause on mouse enter. I hope someone can help me understand what I am doing wrong. <script> function init() { box.play(); } var scroll = document.getElementById("box"); var _scrollDuration = 160; var tl = new TimelineMax(); tl.add(TweenLite.delayedCall(.5, startAutoScroll, [box, _scrollDuration])); scroll.addEventListener('mouseenter', function() { console.log('listening'); tl.paused(!tl.paused()); }); scroll.addEventListener('mouseleave', function() { console.log('listening'); tl.paused(!tl.paused()); }); </script>
-
Hi there, I have two javascript-files in my included in my html page, each calling this in it's beginning: import TweenLite from 'gsap'; Later, when I try to call the TweenLite.to function, I get this error in the second file that I include in my html: Uncaught TypeError: Cannot read property 'to' of undefined at bodyScroll (app.js:692) at HTMLAnchorElement.<anonymous> (app.js:640) at HTMLDocument.dispatch (jquery.js:5201) at HTMLDocument.elemData.handle (jquery.js:5009) Any ideas? EDIT: It seems like TweenLite pollutes the global namespace. Shouldn't this never be the case with browserify?
-
Hi Ive been struggling to figure this out for about 3 days now. I am creating columns dynamically that are added to a container (when user clicks the add button). Using the draggable plugin I have made them draggable (only horizontally). Everything works fine but what I am stuck with is when a column is dragged and dropped on another then (the dragged column) should be placed either to the left or right of the target column. This is my code thus far. Any help will be greatly appreciated. Draggable.create($element, { // use $element instead of ".column". This is declared at the top ^^^ and refers to this specific instance of 'column' type: "x", edgeResistance: 0.65, throwProps: true, bounds: {left: 0}, lockAxis: true, autoscroll: 1, trigger: $element.find(".drag-handle"),// Use jQueryLite (built in to Angular) to find this column's drag handle onPress: function () { columnList = $(".column:not(#" + $element.attr("id") + ")").toArray(); initialCoords = ($element.css("left")); console.log(initialCoords); }, onDragEnd: function (e) { for(var i = 0; i < columnList.length; i++){ if(this.hitTest(columnList[i], overlapThreshold)) { var jqueryColumn = $(columnList[i]); var objectTwoCoord = jqueryColumn.position(); console.log(jqueryColumn); TweenLite.to(this.target, 0.5, {x: initialCoords }); } } } });
-
Hello, I have a websocket project I'm working on. When a user joins the site they get a div created for them with an icon as background image. I have a function that runs on DOMContentLoaded that creates fake user divs and wanted to build a timeline of animation moving them around via the X and Y properties in TweenLite. I am really stuck scratching my head - my TimelineMax produces console logs on Update() but nothinggggg moves. I could really appreciate a second pair of eyes! I've distilled the function in question down to a codepen. Thank you in advance! Stephen
-
Hello, I'm having two issues right now, which I cannot figure out. Issue #1 I have an animation in my CodePen using the first button, and when it finishes it's animation cycle it reverts the cssText back to it's original position. This is for a "preview" animation set up in my software. This will essentially revert back to the original position, so the user can modify their design layers, animation settings, etc, before playing their animation again. However, on the second run of this animation it seems the translated position is not working properly or some sort of caching mechanism is not recognizing the reverted cssText. It gets stuck to the left of the box where it was on exit. To give more details on this, my design software works based off finished designs, and once a design is finished the user can choose to have things enter the screen at different timings (as well as optionally exit after) I provide entrance, exit animations and in this case it rotates in from left, and rotates back out to the left. If you need more clarification, let me know. Issue #2 I'm having an issue with setting up a timeline without automatically playing. I've added the flag "paused: true" in the TimelineMax options, but what this does is begin positions for the element where the TimelineMax.from() defines, rather than keeping the element in it's ending position until we trigger play to run. I use a chained method in my code prepareAnimationTimeline() which should add all the timings, animation tweens together but returns the timeline object back ready to play, while not moving my elements. I use it like this: prepareAnimationTimeline().play() However if I do not call play, with paused: true, it will simply move my elements off screen in their starting positions for my entrance animations. (TimelineMax.from()) Is there any way to achieve what I'm looking for, where I keep elements on the screen and "prepare" my animation timeline in the fashion I mentioned above? Thanks, Justin
-
Hi there, I'm running into a challenge with Tweenlite from. What I'm doing is having some elements appear on the page when the footer comes into view. The problem is that the Tweenlite to works exactly as I am anticipating. Tweenlite from does not. I'm sure I'm overlooking something obvious. The codepen has the FROM version active with the TO commented out. Thank you in advance for your help. Best, Eric
-
Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); }); -
I've created a series of animated icons. See in the codepen. on the end of the timeline i have added a tween to ramp the speed up as the timeline progresses. var NUM6Timeline = new TimelineMax(); NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15) .from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0) .from(".shd6", 6, { opacity:0}, 0) .from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn}); Because the end tweenlite is not part of the timeline when I come to repeat the timeline, i lose the tween light. Could someone help me nest NUM6Timeline in a new timeline so I can include the progress tween. This master timeline I should then be able to loop on my page and included the ramped up animation. Kind regards, Ryan
