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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi Jack/Carl/forum gurus, It's been a very long time! I think I need some general platform- and tech-agnostic strategy advice about how to allow a user to edit a timeline during use. I would very much appreciate any thoughts from anyone. Please forgive me if this is long, but I hope it's not overly complicated. I just want to lay out the needed detail. I need to simulate a simplified GPS-like experience with a follower on a path. For the sake of discussion, imagine a route on a map that you must walk to get from point A to point B. That's working just fine but three critical points are giving me pause. The speed will change constantly (slowing down, speeding up, and stopping for periods of rest). The user must edit the points at which the changes occur, and the times involved. The user must be able to scrub through the animation to position the follower, and then enter values into a table for the tween durations. Thereafter, the animation must be updated each tie the data is edited. The total duration of the "trip" is fixed. So I'm hoping for recommendations (or possibly just confirmation) on what I think is the need to REbuild the animation cyclically. I assume the best thing is to give you a few ideas of what I think I should do and invite better solutions/any points I may be missing. My initial assumption was that the best way to do this was to build a timeline of multiple tweens. I considered adding labels to one tween but, considering other givens that I'll include, didn't see any advantage of one approach over the other. I'm open to ideas. In order for the user to position the follower at any point during the editing phase, there must be an initial tween so the user can scrub a slider to move the follower along the path. Ideally that time can start out as arbitrary, and I'm near certain I have to rebuild the timeline multiple times so that shouldn't matter. But it's also possible for me to insist that the user begin with the maximum time. That will be known in advance, but may change (circling back to the need to rebuild often). Tweening the progress of the follower along the path will always use values of 0 to 1, and the path will never change. But the duration of each mini segment along the path will not only vary, it will likely change during editing. (E.g., the first leg is walking from house to store. Second leg is from store to park. But the author may later change that to leg 1 is running to the store, an inserted leg two will be resting for a short time, and leg three will be from store to park.) I think my biggest question is how to handle the duration of the entire timeline during editing. Something like: To allow the author to play immediately, create a first tween of the follower using any arbitrary time. (Assume 1 second.) Playback is inconsequential, as only the scrubber will be used to move the follower along the path. At this point, we have a timeline of one tween. If the fixed max duration is known (let's say 100 seconds), I can use that instead of an arbitrary time, but I can't see how it matters. Again, open to learning. Author adds a keyframe for leg one, which results in changing the first tween from progress 0 to 1 over 100 seconds, to from progress 0 to .10 over 10 seconds. However, I still need the user to be able to move the follower along the entire path, so I need to create another tween--behind the scenes--to make up the rest of the journey. I can add an arbitrary time for scrubbing or, if the total time is known, add the balance. In other words, I can now add a tween from progress .10 to 1 that lasts either 1 second, or 90 seconds if I know the max duration and can subtract 10 from 100. The rest is rinse and repeat. Here's a hypothetical example: Tween progress 0-1 for 1 second. Max time becomes known so rebuild initial tween for 100 seconds. First leg inserted, 0-0.10 for 10 seconds. Add another tween 0.10-1 for 90 seconds. Second leg inserted, 0.10 to 0.20 for 10 seconds. Rebuild resulting in three tweens, the last from 0.20-1 for 80 seconds. First leg is lengthened to 20 seconds. Rebuild resulting in three tweens, 0-0.10 for 20 seconds, 0.10-0.20 for 10 seconds, and balance of 0.20-1 for 70 seconds and so on. Some obvious questions that spring to mind are: Are there any compelling reasons to create one tween of the max time and rebuild each time using label positions? Is that not the same general process? Can anyone think of a better way? For example is there an easier way to cut up one master tween, rather than adding component parts to sum up the total duration, that would be easier? Is there a recommended process for rebuilding the timeline upon each edit? Because I can just wipe everything out and start over, and this is during the editing process, I don't currently see a need to carefully tear anything down killing tweens, concerning myself with existing callbacks, etc. I can just "nullify" everything and start over each time, if needed. It would be very nice to be able to "rebuild" as transparently as possible, but don't want to make anything overly complicated. Thanks very much for taking the time to read this.
  2. I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening. And would you please tell me how can I make this slider exactly like this video: https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing
  3. Hi everyone. I try to do animation for svg elements. Here's what I did - jsfiddle The problem is that svg photos can be different (as small as 100-500 lines of code, or large as thousands of lines). For what we have now, we need to have svg directly in the DOM. And if the svg file consists of several thousand lines of code, the animation will load the system and will not work smoothly (jsfiddle) So I think we need svg, turn it into canvas and then work with it. If they were ordinary primitive figures (circle, triangle, square) and they would meet once on the page, I could draw them in canvas. But the problem is that these can be different forms of drawing. I thought it would be great if we could svg load a certain mask and display circles in it, which would be animated following mouse over. Such a mask could be made as a single path(mask). However, frankly speaking, I don't know how to do this or if it's possible to do it. I would be very grateful for any help and examples. Thank you.
  4. I aam trying to achieve https://www.brewsandgrooves.com this kind of smoothness with cross browsing really need for my portfolio
  5. oOLucOo

    JPG Sequence GSAP

    Hello everyone, I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/ Thanks to @OSUblake. My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens Here is my code: HTML <button class="btn btn1">BOUTON1</button> <button class="btn btn2">BOUTON2</button> <button class="btn btn3">BOUTON3</button> <canvas id="canvas"></canvas> JAVASCRIPT var baseURL = "anim3/"; var canvas = document.querySelector("#canvas"); var context = canvas.getContext("2d"); var sprite = { frame: 1, lastFrame: 240, totalFrames: 240, textures: [] }; var animation = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 100, roundProps: "frame", ease: Linear.easeNone }); var animation2 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 150, roundProps: "frame", ease: Linear.easeNone }); var animation3 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 2, roundProps: "frame", ease: Linear.easeNone }); loadTextures(sprite.totalFrames) .then(resizeCanvas) .catch(function(reason) { console.log(reason) }); function drawSprite() { // No changes if (sprite.frame === sprite.lastFrame) { return; } context.drawImage(sprite.textures[sprite.frame], 0, 0); sprite.lastFrame = sprite.frame; } function resizeCanvas(textures) { var texture = textures[0]; sprite.textures = textures; canvas.width = texture.naturalWidth || texture.width; canvas.height = texture.naturalHeight || texture.height; canvas.classList.add("is-loaded"); var aspectRatio = canvas.height / canvas.width; // BASE base_image = new Image(); base_image.src = 'anim3/animhead_01.jpg'; base_image.onload = function(){ context.drawImage(base_image, 0, 0); } } function loadTextures(numTextures) { var promises = []; for (var i = 1; i <= numTextures; i++) { var index = i < 100 ? "0" + i : i; promises.push(loadTexture(baseURL + "animhead_" + index + ".jpg")); } return Promise.all(promises); } function loadTexture(path) { return new Promise(function(resolve, reject) { var img = new Image(); img.onload = function() { resolve(img); } img.onerror = function() { reject("Error loading " + path); }; img.src = path; }); } $( ".btn1" ).click(function() { animation.play(); }); $( ".btn2" ).click(function() { animation2.play(); }); $( ".btn3" ).click(function() { animation3.play(); }); Someone can help me ? Thank you.
  6. I'm trying to create a 'sticky' menu that appears after a certain breakpoint and scrolls according to the user scrolling. Basically, when you first start scrolling on the page, the menu should disappear relatively with the page (scroll up normally) but after a breakpoint has been reached, the menu should slide down according to how the user is scrolling. An example of the animation is the menu on the videinfra.com site. The menu translates according to the same number of px that the user scrolls up. I'm currently setting the menu's position to relative before the breakpoint and once the breakpoint has been reached, I set the position to sticky and translate according to the user scroll, using the code here: const transitionTo = isScrollDown ? Math.min( currentTranslateLocation + scrollDiff, VISIBLE_NAVIGATION_POSITION ) : Math.max( currentTranslateLocation + scrollDiff, INVISIBLE_NAVIGATION_POSITION ); TweenMax.to(navigationClassname, 0.5, { y: transitionTo }); The problem is the scrolling looks more... animated than the example in the site above, I'd really like to achieve the smooth natural scrolling as shown there. Also, when the page scrolls really fast, the menu tends to glitch but I can't figure out how to stop that. Alternatively, if there's another method to achieve this instead of using TweenMax, I'd be glad to implement that instead.
  7. Hi All, I am currently trying to create an animation using gsap libraries for the very first time...For which I have included the gsap external library from preferences in Phpstorm...pfa the screenshot below Its works just fine on Codepen...you can find the link below Is gsap compatible with PhpStorm?...because the syntax is not getting detected in the IDE....and I am stuck halfway..Your help would be greatly appreciated Thanks, Lionel Sirvel
  8. I have a red box as the element to animate. Here is a simple representation of how I want to animate the red box. (attached image) How can I get the result using TweenMax? I have tried this with no luck: const e = document.getElementById('element'); TweenMax.to(e, 1, {left:"20px", ease:Elastic.easeOut, delay:1, yoyo:true, repeat:-1}); As you see the box moves right at first and then starts animating from right to left. I just want to set the anchor point of the movement at the center of the box. so that we can not see the first movement to the right. Note: I need to use TweenMax 2.1.3
  9. Hello everyone. Sorry for my English. I'm beginer in HTML CSS JS and greensock, a friend ask me to create a small website (one page) for little pizza shop (one employed (just my friend)), the website is just informative, no online pay, of course i mentioned greensock on website. I use the perfect tweenmax on this website And I have a question, i know this question are already asked, but the answer is not clear for me. I answered the form "Not sure which membership to choose? Click here for help." but i don't know if tweenmax is a special animation. If i use tweenmax for this web site, do we have to pay for a license? I think no, but I'm not sure. Best regards.
  10. Hello everyone, I have been trying to achieve the similar kind of card animation for one of my project. Please click on this link to see card animation effect: http://knowlupus.org/ The way card gets open and close in this game, I want to create exact same effect. I have also attached the codepen link. Is anyone can suggest me how can I achieve this? At least suggest me any resource or idea to achieve this. Your help is much appreciated.
  11. Hello! I have a big slider with animations, and it gives a lot of load on the PC P.S. I apologize for the text with errors - I am writing through transliteration (my language is Russian) Question No. 1: How is it in those slides that are not visible to pause the animation, and run only for 4 seconds? Question No. 2: How to put a stop on the entire animation with media <768, and start a new one with media> 768? And is it possible to set the conditions for the media in the animation (I want to make it beautiful on mobile devices .. now we hide it)
  12. Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance
  13. https://codesandbox.io/s/affectionate-cookies-9hccc?file=/src/App.js It does not work when scroll and works only once
  14. I have created a product list page where every thumb image will have a zoom effect. the zoom effect code is working fine in the pure javascript. but my project is in vuejs and I wanna achieve same effect in my vue component. I already made my component and put some code in vuejs way. but it's not working right way. when I clicked it jumps to top left and then zooming. Here is my sandbox link in vuejs. Maybe I am missing something or there is have a better way to write this pure javascript code to vuejs way. it would be appreciated if any expert takes a look and give me the solution. The zoom effect goal is this. I believe i am very close to this effect. just can't figure out the problem. Thanks in advance.
  15. How can I animate height from 0 to auto using the Tweenmax Timeline? I do a lot of research and see some solutions with CSS. But I have already something dynamic with Gsap where I need to animate height from 0px to auto on clicking the item. I didn't find any solution to gsap documentation and any example where I can achieve it. Here is my code to animate on GSAP. import { TimelineMax, Power4, Expo, TweenMax } from 'gsap/all'; const loginSection = document.querySelector('.login-form'); const loginForm = document.querySelector('.login-form form'); const tl = new TimelineMax({ paused: true }) TweenMax.set(loginSection, { height: 0 }) tl.addLabel('start') .set(loginForm, { opacity: 0, x: 50 }) .to(loginSection, 0.7, { height: 'auto', ease: Power4.easeOut }, 'start') .to(loginForm, 0.7, { opacity: 1, x: 0, ease: Power4.easeOut }, 'start+=0.4') when I click on the element rather than it expanding it renders immediately without any animation. But when I use px instead of auto it's working. But it's not my goal. Your suggestion or solution appreciated.
  16. I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable
  17. Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen.
  18. Greetings! My apologies in advance if the answer to this question exists somewhere. I have had a look but I've not been able to spot anything conclusive. I've used TweenMax exclusively for years in my HTML5 banners, and sometimes my banners have quite a lot of animation going on throughout. However there are typically time limits for animation (after which no animation can be going on), so when it comes to stopping every animation, I used to rely on the extremely useful TweenMax.killAll(); to end everything at the same time; particularly useful when there are dozens of animations (on smaller things) running at the same time. Though GSAP 3 was released a while back, I've only just begun to adopt it into my banner development process. However, it seems (unless I am mistaken - and please do correct me if I'm wrong) that killAll() no longer exists as a function. I'm sure there's a very good reason for this, and I know I can still kill the animations of everything individually, but it seems like unnecessary extra custom code I now need to write when there was previously a function to do this automatically for every single active tween, in one single stroke. Am I missing something? Is there a plugin or something else I have been embarrassingly oblivious to? Many thanks!
  19. I have button 1 that initiates the pulsating animation like this: //Global variables let tween = new TimelineMax(); // button 1 code //First of all select the element let item = $('[aria-label="speak"] svg') // Start the infinite pulsating animation tween.to(item, 1, {scale: 1.1, ease:Elastic.easeOut, repeat:-1, repeatDelay:0.2}) So far so good, BUT... What if we have a second button (button 2) that reverses the iteration Not the whole timeline! I want the second button to instantly animate the pulsating element to its initial state without any jumping or jerking moment. I'm not bound to the code above any pulsating animation is accepted. Let me clear this out: I have used this code but it just reversed the whole timeline to the beginning ... I want it to instantly go back (With the same animation) to initial state : // button 2 tween.reverse();
  20. Hi, I'm trying to add animation on hover in my button. The animation work but I'd some issue in the element after the page scroll as you can see in this example https://codepen.io/MG_Dev/pen/VwYawbe How can apply the animation to all page elements? Thank you!
  21. Hi, Currently I'm in the midst of a project that requires me to show videos sequentially during certain times within certain days of the week. I bumped into this library and it's gorgeous timeline. However whenever I set the duration of a tween (video) on an onStart callback to zero an inconvenient gap of it original duration persists. Is there any way around this problem? Thanks in advance!
  22. Hello! I don't speak English well .. I have a question using TweenMax I'm asking the right question here? I want Controlling a lot of TweenMax in my project I want visual() function run -> reset I want to Infinite repeat this function Please help me. I am a beginner. ? I made the code like this. ⬇️ <script type="text/javascript"> $(document).ready(function() { var visual= function() { var $con_03_mobile = $('.top_con .motion_mobile') , $con_03_01 = $('.con_03 .motion01') , $con_03_02 = $('.con_03 .motion02') , $con_03_03 = $('.con_03 .motion03') , $con_03_04 = $('.con_03 .motion04') , $con_03_05 = $('.con_03 .motion05') , $dim1 = $('.con_03 .dim1') , $dim2 = $('.con_03 .dim2') , $mask = $('.con_03 .mask') , $mask2 = $('.con_03 .mask2') function a5(){ TweenMax.fromTo($con_03_04, 0.6, {x:'8px', y:'184'}, {x:'8px',y:'8px', ease: Power2.easeIn, onComplete: function(){ TweenMax.fromTo($con_03_05, 0.3, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); }}); TweenMax.fromTo($con_03_04, 0.1, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); } function a4(){ TweenMax.fromTo($dim1, 0.5, {opacity:'0'}, {opacity:0.8, ease: Power2.easeIn, onComplete: function(){ }}); TweenMax.fromTo($con_03_03, 0.7, {x:'8px', y:'184'}, {x:'8px',y:'8px', ease: Power2.easeIn, onComplete: function(){ TweenMax.fromTo($con_03_03, 0.3, {opacity:'1'}, {opacity:0, ease: Power2.easeIn, onComplete: function(){ }}); setTimeout(a5, 100) }}); TweenMax.fromTo($con_03_03, 0.1, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); } TweenMax.fromTo($con_03_02, 0.8, {x:'200', y:'0'}, {x:'8px',y:'8px', ease: Power2.ease, onComplete: function(){ setTimeout(a4, 200) }}); } });
  23. Hi, I've been using GSAP 2 for around 2 months for now. By using the knowledge I have I've created some basic animations using it. Now that the GSAP3 has arrived every thing looks a tini-tiny bit difficult.(but can be achieved) I know its new and i also know this is the only place i can get support. My problem is as follows, I have used Tweenmax and scroll magic to create a basic effect. Now that Tweenmax has been merged in GSAP core I cannot use the `.setTween(t1)`. As we have to Specify the animation at first in the Tweenmax and call them later using setTween. How can I achieve it in GSAP3 One more important thing as you can see the page scroll is smooth on the page. A friend of mine has given me the script to implement in the page that will make the page scroll smooth. Now i have lost contact with him. I wonder If someone could re code the script for me. I would be more than thankful Here is the codepen link for my example: https://codepen.io/Wahed98666/pen/MWWBmWa Thanks in advance
  24. Hi, How can i create this sort of effect with gsap https://perficientdigitallabs.com/work Thanks
  25. At first sight an easy animation causes lags and is choppy on mobile devices. In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8. And when the page is scrolled down it's possible to see that the animated text is kind of jiggling up and down, in other words, it's choppy. GIF with visual representation
×