Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tweenmax'.

  • 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 have this issue where I'm tweening a solid element and while the tween is animation there's a weird white line on the right bottom of the element. Once the Tween is complete the white border disappears. The weird part is that it's only visible on safari (mobile and desktop). Please see the code pen for simplified example. PLEASE HELP!!!
  2. My son needed a way to record the data his weather station collected. This is the start of the interface I wrote for him. http://codepen.io/dotComb/pen/Gqdydw Hope this helps someone! -Dan
  3. Hey folks, This is my first every question on the forum, so I hope to get some answers from some of you who are veterans and much more expert than I am. I've been using Greensock recently, specifically the TweenMax version. I have to say, GREENSOCK IS AMAZING! On to my question, this will be quick and should be fairly simple to answer, so here goes: How do I get an object to rotate in place after a button it is clicked, and then get it to reset and get ready to rotate again before the button is clicked again? I would really appreciate some help on this, and I have to re-emphasize that I really think GREENSOCK IS AMAZING! Thanks again folks!
  4. Hey, I would like to create a matrix style code rain with GSAP using the SplitText Utility, but I've encountered an error when following your tutorial video. not sure what I'm doing wrong... any advice would be appreciated.
  5. hi, I am trying to tween width and height with TweenMax in Adobe Animate CC: First frame script (in Animate CC): var root = this; // TweenMax.to(root.myBox, 1.25, {scaleX:2.0, scaleY:2.0, ease:Elastic.easeOut}); // --> works // TweenMax.to(root.myBox, 1.25, {width:"500px"}); // --> NOT WORKS TweenMax.to(root.myBox, 1.25, {left:"12px"}); // --> ALSO NOT WORKS ("myBox" is a name of movie clip on stage). Using: Animate CC Version: 15.1.0.210. TweenMax.min.js Version: 1.19.0 (also tried 1.18.2). createjs-2015.11.26.min.js. Thanks.
  6. Hi, i have problem with smooth SVG elements animation controlled by draggable. Its not working properly, pls check codepen http://codepen.io/mkurdziel/pen/XKEzxm. First thing is that not every element in animating, whats more, some of them are not coming back after animating. I think that TweenMax.ticker.addEventListener("tick", updateVelocity); is not working properly, pls check console. As you can see, its not registering all of the "move" there are gaps between numbers e.g. 100, 105, 107. It should be 100, 101, 102, 103 etc. Do you have any idea to resolve this problem?
  7. I've been using GSAP for a few months now. I'm currently using TweenMax in a project that allows users to set entrance/exit animations for HTML elements. I've written the code that adds each entrance/exit timeline to parent timelines. What I'm wondering, though, is whether there's a way to export all timeline/tween properties to JavaScript Objects or JSON, store the data, and subsequently import the data after reloading the webpage? In theory, this would prevent the need to create each timeline on the fly with each web request. Thanks to anyone who can help me out. I'm currently using TimelineMax together with CSSPlugin.
  8. Hello! I'm trying to create a particle animation, something like this: http://i.imgur.com/OGpHy9m.gif The only thing difference is that i want each bubble to move a bit sideways as well. I found most of what i needed on the forum but now I'm stuck. As you can see in the codepen the bubbles move a bit but when the animation restarts it looks like a glitch, as i understand it, the bubbles start at their original x and y positions which is why that happen. I tried with yoyo set to true but that did nothing. I'm fairly new to Javascript so the code might not be best practice, feel free to correct me on this , always good to learn. Any help is much appreciated! Thank you
  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. Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
  11. Hola forum... first time posting... please note I'm about 6 months new to using the JS version of TweenMax and I still am very much learning. I was a TweenMax user over in Flash for YEARS and am VERY grateful for what you've created in JS. You have created a wonderful tool! However, I've got a prob. I haven't put this in codepen as what I'm trying to get working seems to work just fine in straight HTML by itself... including in Safari, my problem browser (link below). A quick description of what I'm doing: I'm using a WP theme ('The Ken' created by Artbees) w/a fullscreen slideshow plugin. The slideshow is primarily images with the exception of one or two slides I'd like to add animated content to (all SVG). The way I load my animation is simply by placing an <iframe> in my slide content. This works beautifully in both Chrome and Firefox... but Safari and any browser in IOS renders my animation painfully choppy (nearly non-existent unless you stare at it closely... so I know it is 'working'!). This is a URL to the actual source being loaded up in the <iframe>... you'll see this runs wonderfully in any browser (including IOS browsers): http://aztacofestival.com/wp-content/themes/ken-child/main-slide-logo.html Here is the final Dev page in question: http://aztacofestival.com/arizona-taco-festival-2016/ There are four slides in the slideshow at the moment. Please click to slide 2—this is the slide in question. This page I'm developing uses TweenMax all over the place and it's working brilliantly (ie: top right 'We <3 Our Sponsors" is TweenMax. The testimonial roll in the boilerplate / footer area when the pages loads is TweenMax, and all the rollovers below the main slideshow (scroll down) are using TweenMax (again, working beautifully in all browsers). Please note that all my animations are triggered via their own functions. I've tried whittling back all my animation to just the main logo scaling and still have the issue (There is a lot going on. I figured the issue may have been that the animations combined are processor intensive... doesn't seem to be the issue as I have reduced this animation to 1 simple item and still have the issue). I'm worried this may come down to a theme issue... it's just that it's only occurring on Safari (and any IOS browser) that has me confused. Something strange you'll encounter in Safari: When you inspect the source via Safari's 'web inspector' the animations all begin to move / work. But only when in the inspector / rolling over the SVG items markup). Thank you in advance for taking a moment!
  12. Hi All, I'm trying animate elements in an svg to fade in, once all the elements are visible, they will fade out after short delay and the animation will run again. Should I use onComplete? KJ
  13. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { font-family: "Helvetica Neue", Helvetica; width: 90%; font-weight: 200; letter-spacing: 1px; margin: 25px auto 0 auto; background: rgb(234, 235, 235); color: rgb(25, 25, 25); } div, p { margin: 0 auto; } p { color: rgb(125, 125, 125); font-size: 0.85rem; text-align: center; margin-bottom: 17px; } div { width: 35%; overflow: hidden; } </style> <script type="text/javascript" src="./TweenMax.min.js"></script> </head> <body> <p> Refresh this page to re-run the demo. </p> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </div> <script type="text/javascript"> TweenMax.to("div", 1, { opacity: 0.5, width: "*=2", ease: Power1.easeInOut }); </script> </body> </html> above is the code i wrote,i want the width of my div move to 70%,and it does not work. But if i write:width:"+=300",it will work ,I don't know if i can write an expression in the tweenMax?my English is not very good, i hope someone can answer this for me!
  14. Just want to say that I've posted the same question on StackOverflow, but figured I would post it here too I'm really into Google's Polymer and I love GSAP - and so far I've been using the two in conjunction without a hitch. Unfortunately I have now hit a problem - how do I use GSAP (TweenMax to be specific) with custom css variables? For example: To change someCssProperty of someElement I would TweenMax.to(someElement, 1, someCssProperty: "value"); but the someCssProperty part becomes an issue when I'm trying to animate a css variable, which take on the form --some-custom-css-variable I have tried to use TweenMax.to(someElement, 1, --some-custom-css-Property: "value"); (obviously gives me errors) and I also tried to use TweenMax.to(someElement, 1, "--some-custom-css-Property": "value"); (quotes around the some-custom-Css-property) - however this results in no change/animation and an invalid tween value error message on the developer console. So the question is: how would I go about animating custom css variables with TweenMax (GSAP)? Thanks for any help EDIT: I have tried using classes through TweenMax.to("SomeElement", 5, {className:"class2"}); But this changed the element style as if I had declared it in css with a SomeElement:hover {} style (as in it does not animate, just changes immediately)
  15. Why onRepeat function in tweenMax works only once?
  16. Draggable.create("#myDIV", { type:"x", zIndexBoost:false, throwProps:false, onDragEnd:function() { TweenMax.to($("#myDIV"), 5,{css:{left: 0}}); console.log('DRAG END'); }, }); TweenMax.to($("#myDIV"), 5,{css:{left: 0}}); I wanted this to trigger every time drag ends, but this only animates only once and is not accurately goes to its original position
  17. I'm getting this error when attempting to implement Draggable. I'm confused because I am able to do some of the functions that are shown in the 'Get Started' section i.e var obj = {myProp:0};TweenLite.to(obj, 2, {myProp:100}); I added a codepen - very simple representation of what I am doing. Any idea what's going wrong here?
  18. Hello, I'm trying to scale a div containing an image. The animation is alright and does what I want, but I have a strange blur during the zoom, and after the animation is complete, the image is focused again. I've linked my codepen, I don't know where it comes from, and I try some fixes, but none of them works. Thanks for help, Arthur
  19. Hi, I created a polyline SVG curve. I am trying to a really simple tracing from 0% to 100% but I am not sure why it isn't working? Shouldn't it be as simple as: TweenMax.fromTo("#graphing", 2, {drawSVG:"0%"}, {drawSVG: "100%"});
  20. I have a problem with my current code, it seems to big of a hassle to put in codepen and make it work since it has lots external files so i am only posting the relevant JS code. var tlAddDevices = new TimelineLite(); tlAddDevices.fromTo(desktopHome, devicesTime, {x: -100,y: 100,opacity: 1,display: "block"}, {x: -100,y: 170,opacity: 1,zIndex: -1,},0); tlAddDevices.fromTo(laptopHome, devicesTime, {x: -600,y: 170,opacity: 0,display: "block"}, {x: -420,y: 371,opacity: 1,},0); tlAddDevices.fromTo(tabletHome, devicesTime, {x: -0,y: 170,opacity: 0,display: "block"}, {x: -130,y: 429,opacity: 1,},0); tlAddDevices.fromTo(smartphoneHome, devicesTime, {x: -100,y: 400,opacity: 0,display: "block",zoom: 0.5}, {x: 0,y: 446,opacity: 1,zoom: 1,},0); tlAddDevices.fromTo(bmw1, devicesTime, {x: 0,y: -70,opacity: 1,display: "block",}, {x: 0,y: 0,opacity: 1,},0); var removeDevicesTL = new TimelineMax() removeDevicesTL.to(laptopHome, 2, { opacity: 0, x: 100 },0); removeDevicesTL.to(tabletHome, 1.5, { opacity: 0, x: 100 },1); removeDevicesTL.to(smartphoneHome, 1, { opacity: 0, x: 100 },1.5); var tl3 = new TimelineMax(); var showTextLength = 3; tl3.add("startDekstopSlideshow") .to(bmw2, transitionDuration, { opacity: 1}) .to(bmw3, transitionDuration, { opacity: 1 }) .add("showEIX") .to(iex, transitionDuration, { opacity: 1 }) .add("showWeekendDeals") .to(weekendDeals, transitionDuration, { opacity: 1 }) tl3.add("showDashboard") tl3.to(dashboard, transitionDuration, { opacity: 1 }) .add("end") var tlText = new TimelineMax() .add("Branded-Leads") .to(textSlides[0], transitionDuration, { opacity: 1, y: "+=100" }) .to(textSlides[0], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) .set(textSlides[0], { y: "-=100" }) tlText.add("Groot-bereik"); tlText.to(textSlides[1], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[1], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[1], { y: "-=100" }) tlText.add("Dashboard"); tlText.to(textSlides[2], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[2], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[2], { y: "-=100" }) tlText.add("Demo"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) //tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) //tlText.set(textSlides[3], { y: "-=100" }) tlText.add("endText") var mainTimeLine = new TimelineLite() .add(tlAddDevices) .add("set1","+=2") .add(tl3.tweenFromTo("startDekstopSlideshow", "showEIX"),"set1") .add(tlText.tweenFromTo("Branded-leads", "Groot-bereik"),"set1") .add("set2") .add(removeDevicesTL,"set2") .add(tl3.tweenFromTo("showEIX", "showWeekendDeals"),"set2") .add(tlText.tweenFromTo("Groot-bereik", "Dashboard"),"set2") .add("set3") .add(tl3.tweenFromTo("showWeekendDeals", "showDashboard"),"set3") .add(tlText.tweenFromTo("Dashboard", "Demo"),"set3") .add("set4") .add(tl3.tweenFromTo("showDashboard", "end"),"set4") .add(tlText.tweenFromTo("Demo", "endText"),"set4") When i use this code i expected the mainTimeline to play the sets in order but for some reason it seems to start with the last set (set4) and then start properly from set1 all the way to set4 and stop like i expect it to. Maybe i am misunderstanding this. I have all the imgs (iex bmw1 bmw2 etc) opacity set to 0 using css but they instantly appear. I will try later to create a codepen to replicate this but maybe it is possible to see my error via this code? EDIT: Added codepen demo
  21. Hi there, I am trying to create the effect of one shape morph in width from target1 to target2. And then morph back from target2 to target1 using .reverse() However I am unsure why my .reverse() isn't working? Cheers, Venn.
  22. I have the following code: window.onload = function() { var tl = new TimelineMax(); tl.to(document.getElementById("exit-button"), tt, {autoAlpha:1, ease:Power3.easeInOut}) } I'm loading tweenmax from the CDN. And on my localhost everything works as planned, but when I upload to the clients server I think they have some other scripts/ assets that are throwing the window.onload off. What can I do to avoid the error: "Can't find variable: TimelineMax"? HELP?!
  23. Hi there, I am trying to build a project for work that is essentially a map based infographic. This is my first major project using Greensock so i am trying to do things step by step. First step. The icons that will display on the map. I have made these red in my example and was want each to open a box next to them. I was wondering the best way to do this? Of course at the moment when i click one they both open. Is the class best used to style in the css (e.g. .icon) and the id for Greensocks use? Any help is appreciated, Phil
  24. I'm loading my SVG files into different elements on my website. I'm trying to animate it with TimelineMax and it's didn't animated. I think it's because SVGs loaded dynamically and TweenMax didn't see them. How to animate them with TweenMax?
  25. Hello, I'm new user of GSAP, and I try to make a webapp projet, with animation created with GSAP. I have not really problem for create and animate, it's a hard process to know all posibility of this tool but, is not the problem.. My approach is to try to launch SVG animation without hover (obviously in ipad) and without click: - My webapp content section (fullpage.js) like : #section1 : "home" - #section 2 : "my first animation" etc... I see the examples : http://www.publicis90.com/#/publicis90, or that one http://www.cryptarismission.com/ on this site and it's awesome but i dont understand how can i do that.. I want said : When I change section -> my animation start. If i launch my app now.. All animation start in background and when i change #section, animation is ended.. I sorry for my english and my incomprehension :'( Thanks a lot B.
×