Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'tweenlite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. I am wondering if Greensock is able to tween an API from a different library? I am using Framer.js with my mobile work but using the GSAP animation library. In Framer you can tween the x value (relative), or the screenFrame x value (absolute value). I have attached an image for the API. https://framerjs.com/docs/#layer.layer (under screenFrame) The screenFrame API: element.screenFrame = { x: 400 }; Instead of tweening the x value which is relative, I am trying to tween the screen frame absolute value. TweenMax.to(element, 1, {x: 0}); TweenMax.to(element, 1, {screenFrame:{x: 0}}); <-- It is not working? It is because my JS/GSAP syntax isn't correct?
  2. OUTDATED! These webpack issues are getting out of hand, so I made a little demo to help you get started. But first, have you considered not importing GSAP? I would suggest using a CDN instead as your app will load much faster since it's not included in the bundle and can be pulled directly from the user's browser cache. GSAP is available on both cdnjs and jsDelivr. JsDelivr is kind of unique in that you can bundle all your files up in a single HTTP request! And dependencies that are not resolved by webpack can still become dependencies of the output by using the externals option. For example, if you are using React you could do this using the unpkg CDN. <script src="https://unpkg.com/react@15.3.1/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script> And then in your webpack.config, you would configure those libraries like this... module.exports = { externals: { "react": "React", "react-dom": "ReactDOM" }, ... }; If that's not an option for you, here's the repo I made. To run it, install webpack and the dev-server first npm install webpack webpack-dev-server -g, and then npm install to install the demo. Use npm start to start the dev-server on port 8080. If you're wondering where my gsap import is, there isn't one. I made TweenMax global using the ProvidePlugin. https://github.com/OSUblake/gsap-webpack
  3. When utilizing TweenLite.to and scale in a project with <svg> graphics, I've noticed that FireFox and IE11 (not Edge and untested on <IE11) treat my container as though it were "layered". Each time the mouse hits the <svg> graphic inside the <div> it treats it as if I've left the container and minimizes the resulting scale. This causes a "jerky" effect and looks broken to a normal user. I've verified this by watching the console for when I enter and when I leave. Chrome/Edge do not exhibit this behavior and I cannot see how to "fix" this for Firefox/IE11. **The CodePen is only a partial example of the full project (3 wedges vs. 8) but the effect is the same** Things I've Tried: Adding the correct class on my <path>, <symbol>, <g>, etc => same result Changing the variable class/id to hit higher in the document => same result Verbally abuse my computer => same result Any ideas?
  4. I wrote a simple module to demonstrate the use of a progress bar for downloading files or other server side events. Everything works as expected except for the timing of the "onComplete" callback attached to the tween. It appears to execute the callback at the beginning of the animation instead of the end. I'm sure the issue is with my code but I do not understand why it is happening. To view the issue, press any of the buttons on the codepen page. I attached an alert at the very end of the progress bar (100%) that freezes the animation. Note the values of the header text, footer text and bar text.
  5. Any ideas on why I am getting the error that TweenLite is not defined here? I have tested with over code that it definnetly is but for some reason when using the below it wont work? define(['jquery', 'TweenLite', 'TimelineLite', 'gsapCss', 'gsapJquery'], function ($) {'use strict';}); var slide = TweenLite.to(1.25, {x:-150, ease:Power4.easeInOut, onUpdateParams:[".box_2"], paused:true}); $(".box_2").hover(over, out); function over() { slide.play(); }; function out() { slide.reverse(); };
  6. I am working on a progress bar demonstration that simulates the downloading of multiple files. To simulate the time it takes to download each file, I created a random time between 1 and 5 seconds as the lag between each tween. Either the function that creates the lag or one of my methods that creates the tween seems to be the problem. At this point, I have looked at it for such a long time that I just can not figure it out. Any assistance or advice would be appreciated. See the codepen link for a demonstration of the issue(s). Thanks, James
  7. First of all, you can find a simplified demo of my code in this JSFiddle. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project. I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations. This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters: nextOrPrev, that runs one animation or another based on the value provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev"animation, not yet used, just emits an alert("prev"). bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap. In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu. This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it? Thanks for any help.
  8. From my codepen you can see that hovering any of the parent divs results in my animation slewing across them all. In order to isolate the animation per hovered parent element I could copy paste the code using a unique ID per parent, but that seems very inefficient. Is there a way to write a main script and pass in parameters from each parent div? I'm really new to javascript logic but I could follow along if another post like this has been mentioned before. Thanks. edit: just to clarify, I'm basically wondering how I could refactor my code
  9. TL;DR I upgraded our project to use 1.19.0 after using 1.18.2 and requirejs couldn't find TweenLite unless I defined it explicitly in the require config paths object. Is it the expected behavior? We do amd with requirejs. My GSAP section in the paths object looks like this (there is also a base url defined of our external libs server): paths: { // ... TweenMax: {min: serviceURL('tweenmax/1.19.0/minified/TweenMax.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/TweenMax')}, TimelineMax: {min: serviceURL('tweenmax/1.19.0/minified/TweenMax.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/TweenMax')}, ScrollToPlugin: {min: serviceURL('tweenmax/1.19.0/minified/plugins/ScrollToPlugin.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/plugins/ScrollToPlugin')}, DrawSVGPlugin: {min: serviceURL('tweenmax/1.19.0/minified/plugins/DrawSVGPlugin.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/plugins/DrawSVGPlugin')}, // ... } This setup worked for a long time now without changing anything but version numbers up until 1.18.2. After changing the paths to 1.19.0 I got a console error by reuirejs saying it got 404 on TweenLite because it tried to load it from localhost - require.min.js:34 GET http://localhost/TweenLite.js The way to overcome it was to add a line in paths for TweenLite too TweenLite: {min: serviceURL('tweenmax/1.19.0/minified/TweenMax.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/TweenMax')}, Is it an expected behavior? Is it a bug? Am I missing something in the require config? Thanks. Tom.
  10. Meds86

    SVG line animation

    I'm new to SVG's and trying to get this to animate. I thought something like this would work TweenLite.fromTo('.path', 1, {drawSVG: "0%"}, {drawSVG: "100%"}); but unfortunately no. http://codepen.io/Meds/pen/grWOXW I would like to line animate this logo, any troubleshooting guidance would be appreciated.
  11. Hey everyone, I recently put together a nifty little site for a local event in town and (of course) I utilized Greensock in my project. I took a demo that I had found and tweaked it so I could create the snowfall effect seen in the hero/background. However, I've noticed that it seems like its slow (performance wise) on certain devices and its gotten me thinking that maybe I can optimized the performance to insure a steady 60fps framerate (as consistently as possible). The codepen URL I provided shows the original fork example I created. http://codepen.io/iansvo/pen/NNVPPj Here is the live website where this code was implemented (sans the transform: scale() on the <div id="snow"></div> element): http://jacksonvillechristmas.com Any and all feedback would be most appreciated. Thanks!
  12. Hello again Looking at the documentation and having used it a lot in the past days, it seems to me that TimelineLite can almost always be used. Since from your own example it can be written in two ways:= //add another tween at the end of the timeline (makes sequencing easy) tl.add( TweenLite.to(element, 0.5, {opacity:0}) ); //append a tween using the convenience method (shorter syntax) and offset it by 0.5 seconds tl.to(element, 1, {rotation:30}, "+=0.5"); The second way above is very similar to how you would write if using TweenLite.to( etc...) So I wonder if there's any good reason to not always use TimelineLite- it seems to inherit the same callbacks too ? Thanks in advance .S
  13. Hi, I am wondering what's the relationship between stagger's duration and stagger's staggerDuration. Looking at this code: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25}). The time duration is 1 but there are 3 elements to stagger. mc1 = 0.25, mc2 = 0.25 + 0.25 mc3 = 0.25 + 0.25 + 0.25 1 - 0.75 = 0.25 (What happen to this extra 0.25?) - Is the duration the total duration for the whole stagger code (mc1, mc2 and mc3 combined?) And the stagger duration will modulate to fit within the whole duration? Thanks, Venn.
  14. Hi! Think I found a bug of some sort that if I add a class name using TweenMax and my tweening object has already a classname that contains the same word it removes. Example: Want to add a class by name: "hover" My div has classes: <div class="btn animate-hover color-green">My Button</div> The result will be: <div class="btn animate- color-green hover">My Button</div> It shouldnt behave like that am I right? If using underscore it works: <div class="btn animate_hover color-green hover">My Button</div> Possible to solve this? Many thanks!
  15. I'm new to GreenSock, I have 2 objects that have the same ID. I've added an opacity but it only fades in one of the objects, what am I doing wrong. I've searched a lot and can't find a solution. Here is my code, I have 2 headshots I want to fade in but only one headshot fades in, nothing happens to the other. window.onload = function(){ var headshot = document.getElementById("headshot"); TweenLite.to(headshot, 0, {autoAlpha:0}); TweenLite.to(headshot, 2, {autoAlpha:1, delay:2}); }
  16. Hey everyone, Image you have a cartoony chess game. And you're sliding the queen from one end of the board to the other. I want to add a teetering effect, with the piece pivots on it's base a bit to begin it's slide, and then teeters in the other direction when it ends. I have the pivot centre at the bottom center, but I can't seem to find an elegant way to pivot back and forth. So what I've done is: var maxTilt:Number = 10; // degrees var slide:TimelineLite = new TimelineLite( { autoDispose:true } ); slide.add(TweenMax.to(obj, DURATION / 4, { rotation: -maxTilt} )); slide.add(TweenMax.to(obj, DURATION / 2, { rotation: maxTilt } )); slide.add(TweenMax.to(obj, slide.add(TweenMax.to(obj, DURATION, { startAt: { x:from.x, y:from.y }, x:to.x, y:to.y, ease: Back.easeInOut.config(1.0) } ), 0); DURATION / 4, { rotation: 0} )); Problem is the nice ease effects can't be transitioned between the tils. Is the best way to do this? I hope not. Thank you! Mark
  17. Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?
  18. I am testing an animation through Google Chrome which currently is not working. I do not receive an error but the console log reports "invalid pause tween value: true". In general, what does this mean? I searched the forums and did not find any topics on this message so I though I would go ahead and ask. If it helps, below is my code for the tween: var fadeOut = function (el) { var animation = TweenLite.to(el, .75, { autoAlpha : 0, bottom : "-=100px", ease : Linear.easeNone, paused : true }); return animation; };
  19. I have put together a compilation of 11 short videos with quick demos explaining the basics of GSAP API to a complete beginner. If you just staring out with GSAP this might be a good place to start. Go To GreenSock 101 Happy tweening. PS: If you happen to sign up and go through the free course, please let me know what you think about the content. Your feedback is very valuable.
  20. hi all, im trying to create a slide effect for the side nav and just after that a stagger for the `li` but I'm not sure how to get it done. i've tried two separate setTween() and also onComplete but i obviously doing something wrong this the animation plays wrong or not at all. so again, I just want the navbar to slide in when im scrolling to it and immidiatly after i want to `li` (.btns) to animate to var sideNanFrom = { opacity:.3, width:0, ease:Elastic.easeOut, onComplete:sidNavBtnTween } var sideNavTo = { opacity:1, width:130, delay:0.4 }; var btnsFrom = { scale:0, opacity:0, delay:0.9, ease:Elastic.easeOut } var sideNavTween = TweenMax.from("#secondary_nav", 0.6, sideNanFrom, sideNavTo) var sidNavBtnTween = TweenMax.staggerFrom(".btn", 1.5, btnsFrom, .2 ) side .setTween(sideNavTween) .setPin('#secondary_nav ul') .addIndicators() .addTo(controller); }
  21. I've been meaning to learn GreenSock for some time and have been trying to justify the cost of onsite trainer to management for some time since we are getting asked to do more and more banner work. But as a complete newbie to TweenLite, I am wondering if it would be a good solution to a problem we have right now. I am drawing an arc on a canvas and am trying to tween just the endAngle var. Since this isn't an attribute of the canvas itself, but a var within it, I'm not sure if TweenLite is what I am looking for. I've linked to a very quickly thrown together example. Any help would be much appreciated.
  22. Stumped on this. I would like to use the attr plugin to do a simple animation for my banners, basically just have an image animate in from the side or top. This page makes it seem like I could use the attr plugin to animate the x, y coordinates of an element. I can get the heigh and width animation working as long as I use a table, but can't figure out how to get the x and y working. https://greensock.com/AttrPlugin My html and scripts are attached. Archive.zip
  23. Hello all. I have a container as below: .section-fixed{ position:fixed; width:0px; height:0px; top:-280px; right:-280px; overflow:hidden; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:transparent; opacity:0; z-index:10; } which there is a few items within it: .item-f{ text-decoration:none; top:calc(50% - 15px); left:calc(50% - 15px); position:absolute; border-radius:50%; width:30px; height:30px; text-align:center; color:black; font-size:25px; cursor:pointer; } <section class="section-fixed"> <div class="main-menu-f"> <div id="HomeButton" class="item-f">A</div> I wrote a code with TweenLite as below: if(//some condition){ TweenLite.to('.item-f:nth-child(1)', 0.6, {x:0.98 * -220.56290407832017,y:0.98 * 30.932307155207802,rotation:360,autoAlpha:1,ease:Back.easeOut.config(1.87)}); else{ TweenLite.to(".item-f:nth-child(1)", 0.6, {x:0,y:0,rotation:-360,autoAlpha:0,ease:Back.easeIn}); } The problem is for when if condition is true, unfortunately ease function doesn't work correctly and the element moves in its way, simply. But when the else condition is true, Back.easeIn done correctly. What's going on? Can everybody help me at this?
  24. I am looking for a way to use the staggerTo, etc. methods on TweenLite, but am not sure what plugin file to include. Plz help
  25. Hi there! I have many shapes in EaselJS -not spritesheet, only shapes- (shape_1, shape_2, ..., shape_n) which are different frames of the same object and I want to animate them with TweenLite to display all the frames (1,2,3,4,...), like an animated movieclip in flash. I have seen that with CreateJS TweenJS works this code: this.timeline.addTween(createjs.Tween.get({}).to({state:[{t:this.shape0}]}).to({state:[{t:this.shape1}]},1).to({state:[{t:this.shape2}]},1).to({state:[{t:this.shape3}]},1).to({state:[{t:this.shape4}]},1).wait(1)); to display sequencially all the shapes... Is there any equivalent in TweenLite? Best Regards Rosa
×