Search the Community
Showing results for tags 'tweenmax'.
-
Hey guys! I'm trying to draw out a rather dense set of SVGs. Ideally I'd like to draw out EVERYTHING, including the boxes on top, and the text (if that's possible?). But either way I'm having weird issues with the timing. I'm guessing it's related to how I am calling the "shapes" variable, like maybe it's running through a LOT of shapes, but only really drawing the lines? Any suggestions would be helpful!
-
Why onRepeat function in tweenMax works only once?
-
I'm making a call to animate a wedge in my chart from one position to another like so: TweenMax.to("#wedgePath_" + id, 1, { morphSVG: data[j].Value[1] }); This for every other wedge in my chart except one, where the wedge doesn't animate and instead just infinitely repeats an error (I'll screen shot the detail and attach it). The "wedgePath" + id matches the id of the wedge in chart. The original path is "M229.8083 276.5665 A185 185 0 0 1 268.2768 233.1447 L220.6919 132.8616 A185 185 0 0 0 124.5208 241.4164 Z" and data[j].Value[1] is "M374 300 A185 185 0 0 1 374 300 L485 300 A185 185 0 1 0 485 300 Z". If I comment out that one call to TweenMax.to the wedge animation doesn't work, but I also don't get any errors. If I comment out that one line, the wedge animation doesn't work, but I also don't get any errors.
-
Hi, I have just started working the Tweens here, so please if you can help me on probably a simple thing for some. I would like to: 1. Add a YouTube video that autoplays after an animation (not when the banner starts, so the video starts autoplays after the animation). 2. When clicking anywhere on the banner to be taken to the external link, the video stops. 3. The video stops after playing for example, 10 seconds. Can this be done? I have been trying and looking into it and unable to combine my animation and Youtube video together.
-
Hi, I'm not an expert in GSAP and I have some troubles with my SVG animation. Indeed, I want to create a pre-loading effect on my page but I have some issues regarding the delay. I made a screenshot which show my problem : https://vimeo.com/189758547 My SVG appears at the beginning of my animation but I want to reveal the SVG by animating the strokes. Here is my JS code (the link to my codepen) : $(window).load(function () { $(function () { var first = $('#firstletter'), second = $('#secondletter'), competences = $('.competence'), // Sample script for Tweening on a Timeline tl = new TimelineMax({ delay:0, paused: false, yoyo: false }); tl.fromTo([first, second], 3, { drawSVG: "100% 100%" }, { drawSVG: "0% 100% ", ease: SlowMo.easeOut }); tl.fromTo(competences, 1, { opacity: 0, top: 0 }, { opacity: 1, top: "50%" }); }); $('#loader-overlay').delay(5000).fadeOut('slow'); // 5 sec de délai avant que la div ne disparaisse }); Thank you for your help
-
Try out picadipity.com to see GreenSock in action! From your help I was able to build a control that features infinite looping of pictures using modifiers. The control also supports draggable and throwable behavior with stops at notches that centers the pictures. I am using the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> <script th:src="@{js/greensock/ModifiersPlugin.min.js}"></script> <script th:src="@{js/greensock/ThrowPropsPlugin.min.js}"></script> This has been great fun developing this control!
-
Greetings. I've several audio files in my project (html based animations), playing in different actions. I labeled every sound as; var audio1 = document.createElement('audio'); var audio2 = document.createElement('audio'); audio1 .setAttribute('src', 'audio/audio1.mp3'); audio2.setAttribute('src', 'audio/audio2.mp3'); etc. And playing them during animation with TweenMax (like audio1.play, TweenMax.to(audio1, 1, {volume:0...) I'm trying to mute all sounds if visitor leaves to another tab; with $(window).blur and focus functions, but active audio is changing during animation, so i need to get back to active audio file when user returns the tab. How can i mute the volume of the tab? Thank you very much in advance for all your help.
-
Hello ! Dear guys, I have a problem. My program works llike: I have one animation and when I click on e.g. 'Button1' my animation will change, and second animation will start (in infinite loop like the first). I created an object with coordinates of my polygon points. I start with points[0]. When I click on button1 named 'Warsaw' my function gets current position of each verticles and paste it into new object with coordinates because I want a smooth transition between my animations. So I think: Aha! I kill my old animation, create short new animation (with transition from current coordinates to first coordinates of my second animation), kill short animation and finally create my second animation which will be infinity looped (but until click on the second button). But! When I want to kill my first animation, javascript console says "TweenMax.kill is not a function". I don't know how repair that. Please help And sorry for my english
-
Hi all, I'm trying to animate an SVG <line> and a <circle> which are both dashed. What I need is the dashes to be shown one-by-one (staggered, I guess ) to make the line "drawn". I've tried animating the strokeDasharray like so (where "secondStepDashedLine" is the <line> element) which didn't do anything really: tlInitial.staggerFrom(secondStepDashedLine, 1, { strokeDasharray: 0 }, 1.5); Is there any way of doing this? Thanks in advance.
-
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. -
Is there a shorthand to jump to the end of a TimelineMax (Actually jump to starting point because timeline is running in reverse mode) instance (and fire all of its onComplete listeners) when TimelineMax running in reverse mode ???
-
I am using TweenMax for some animations. The animations work fine in Chrome, but Safari and Firefox both have issues with the center animation. I though GSAP removed those browser issues, so I am thinking I must be doing something wrong. Any help would be appreciated. Thanks!
-
Hi All, I am trying to achieve a blinking eye effect. Ideally, I would like the eye to travel down from the top to half in the eye, this would simulate the eyelid moving down the eye to meet the other eyelid. I have tried scale with transformOrigin to achieve the effect as well as opacity 0. Opacity 0 seems to give the best effect, but the visible fade doesn't look too great. Would I need to use SVGmorph to achieve this? Can anyone point me in the right direction? My codepen attached shows the example. Thanks, Tom
-
Hello! Is there any way that I could manipulate the duration of each tween in a staggerTo() function? Thanks!
-
Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum
-
Hi guys I have a weird situation and I cannot explain what is happening Super simple, I basically create a div and set it to have rounded corners. Then set the overflow to hidden. Next I pop an image inside and all I want it to do is rotate inside, but it's glitchy. With the codepen URL for example you can see (while animating) the div temporarily looses it's overflow hidden the and hand is revealed on top. With our website: http://iplabs.com.au/amaysim/history-of-the-mobile-phone/ you can see it sitting there on top of the circle. Removing TweenMax instantly fixes the issue. Any ideas? Thank you!
-
Hey guys please please help to understand THIS on javascript. I am trying to use THIS to select the same selector from parent function. Here's example: function Animate() { console.log("Clicked!"); TweenMax.to("#thing", 1, {onStart: a}); } function a() { console.log("Yeah!"); TweenMax.to(this, 1, {y: "100px"}); } I know this is clever but I want to know how to select the same selector from parent function. Same as THIS.
-
Hi, Very simply, I'm looking at this pen - http://codepen.io/chrisgannon/pen/pbzEYr. I want to have a button that moves the dot to predefined point on the path and then stops. TIA
-
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?
-
Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!
-
Hi there, What I want to do is have a tween that moves 250px right, has a Power3.easeIn and a Back.easeOut. I can animate the Power3.easeIn fine but how to do get the Back.easeOut. at the end of this movement?? Power3.easeIn line of code: TweenMax.to( $( '.mybox' ), 2, { right: 250, ease:Power3.easeIn}, 2); Im sure its not too hard but I cant seem to work it out. Thanks in advance.
-
I'm trying to come up with a "better" way to write these morphSVG animations. The issue is that I have about 100+ paths I want to animated all at once. Everything works fine but I'm assuming there must be a more efficient way to do this, maybe with some sort of loop and an array? Then a function that gets called each time it loops? As of right now my project has like 2000 lines of JavaScript and I'm not even finished! In the codepenn you will find a small example with six different elements I'm morphing at the same trigger point. Thanks in advance and have a great day everyone! Kind regards, -Bruno -
HI! I want to convert timeline lite elements with their animations into canvas animation, I mean the whole dom element and its children that contains timeline lite animations. an animation like this one http://codepen.io/ihatetomatoes/pen/QboVVV is there way to do that? I've found some libraries that only take a screen shot of the page but no animations.
-
Hi, Is there a better way to do this? I want to load about 15 different videos all up for a portfolio type site. Any help is appreciated. Thanks, Phil
-
Hey there! First time poster here, just got my membership and I'd love to get some help on an animation I'm trying to merge with scrollmagic! I made this little SVG animation of a tree growing using TweenMax and it worked out pretty well. Now I'm trying to integrate it with scrollmagic and I'm having a hard time figuring out what's wrong in the process. I have the 8 different stages (paths) and I wanted them to occur based on scroll position. I have a simple codepenn linked and if anyone could check it out and give me some pointers on what's missing or what needs to be changed in order for the animations to happen. My JS experience is fairly limited but don't go easy on me I'm here to learn! Thanks in advance and have a great day everyone! Kind regards, Bruno
