Jump to content
Search Community

Search the Community

Showing results for tags 'tween'.

  • 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

Found 199 results

  1. Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.
  2. Hi, I have a side menu that is present on a page after page load. You can then slide the menu off the screen by either scrolling 1px or clicking the 'X' on the menu. When the menu has disappeared from a view a 'Menu' button shows and if you click on it, it brings the slide menu back in. Once again to complete the cycle you can get rid of this menu by either clicking the 'X' on the menu or scrolling 1px up or down. There's a bug in the code though which I found accidentally, which is purely of my making and i can't seem to get rid of it. Problem: When the menu has been closed and all you have is the 'Menu' button, if you click this button and accidentally scroll as the menu slides back in, the Tween that is fired by the 1px scroll hijacks the click Tween and it slides off again. Is there any built-in functionality in GSAP to prevent one timeline firing whilst another one is animating? (effectively making it null for the duration of the other animation). I've been going around in circles trying to solve it with setTimeOut(), but I don't think this is the correct way to approach it. The GSAP code is below and there is a pen to illustrate the problem here http://codepen.io/emilychews/pen/PpXaNV Any help / ideas would be awesome. Emily jQuery(document).ready(function($){ // global var for menu container var $menuContainer = $('.menu-container'); TweenMax.set($menuContainer, {x: '-100%'}); //set the menu off the screen before sliding in on page load TweenMax.set('.showMenu--button', {autoAlpha: 0}); // Button that appears after the Menu slides away // slides menu in on page load function bringInMenu(){ var menuIn = new TimelineMax(); menuIn .to($menuContainer, .9, {x: '0%', ease: Power1.easeOut}) .from($menuContainer, .5, {skewX: '2deg', transformOrigin: 'bottom right', ease: Power1.easeOut}, '-=.5') .to('.downarrow', 1, {y: -20, repeat: -1, yoyo: true, ease: Power1.easeOut}); // animated down arrow }; bringInMenu(); // Close menu with the 'X' on the menu itself $('.menu-x').on('click', function(){ var closeOnClick = new TimelineMax(); closeOnClick .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); }); // Close the menu on scroll var scrolled = false; $(window).scroll(function() { if ( !scrolled && $(document).scrollTop() > 1) { var closeOnScroll = new TimelineMax(); closeOnScroll .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); // reveals menu button scrolled = true; // update the scroll state } }); // ClICK FUNCTION TO BRING BACK MENU $('.showMenu--button').on('click', function() { var desktopMenuClick = new TimelineMax (); desktopMenuClick .to($menuContainer, .3, {scaleY: 1, transformOrigin: 'top right', ease: Power1.easeIn}) .to($menuContainer, 1, {x: '0%', ease: Power1.easeIn}) .to('.showMenu--button', 1.3, {autoAlpha: 0}, '-=1.3'); scrolled = false; // resets scroll state to false }); }); // end of jQuery
  3. Hello guys, GSAP newbie here, hope someone can tell me what I am doing wrong. When I define scaleX value in transform attribute of SVG <g> it doesn't seem to be recognised by GSAP. Only when I explicitly set scaleX (line 2 in JS) does the tween work as intended. Translate values seem to be recognised just fine. http://codepen.io/hrvojesimic/pen/XMybJe?editors=1010
  4. non-working example: now works! http://codepen.io/philipbell/pen/YZxewm It's snapping to it's new X value instead of tweening. Example of what I'm trying to achieve: http://codepen.io/philipbell/pen/XMaZEo The same equation works when used in a separate tween. I've used this same method in timelines, but for some reason it's not working for a 'to' tween. Why is animContainerR snapping to it's x value when passed through the modifyer plugin? Thanks!
  5. Simple question with perhaps a complicated answer. Is it possible to animate multiple objects towards a central point in GSAP? Rather than adding positioning tweens to each individual object? For example I have a scene with objects around the canvas, I'd like them to slide onto the canvas towards the middle of the canvas.
  6. Hi! I have a HTML5 banner advertisement that I'd like to automatically replay the animation on a loop. Is this possible? I have attached the HTML5 banner advertisement source files. Please let me know how to accomplish this. Thank you for your help! 120x600_v2.zip
  7. Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve. The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object. That curve datas are given by BezierPlugin.bezierThrough So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve. Could please someone help me understand what i'm doing wrong?
  8. Making an animation, and the question appeared : I need to animate one tween while other tweens are animating. Sorry the code is too big, so will cut it: TimelineMain.to(the.Second_frame_bg_1, .75, {scale: 1.3, autoAlpha: 1, ease: Sine.EaseOutIn}, 'second_frame_step_1'); TimelineMain.to(the.Second_frame_bg_1, 4, {scale: 1.2, x: '-40px', ease: Sine.EaseOutIn}, 'move_right'); //I want this tween to be animated while next one tweens are animating TimelineMain.staggerFrom([Destination_city_1, Destination_price_1], 0.7, {scale: .3, opacity: 0, ease: Sine.EaseOutIn}, .15, 'second_frame_step_1'); TimelineMain.from(Destination_cta, 1, {y: '50%', opacity: 0, ease: Back.easeOut.config(1.7)}); TimelineMain.from('.destination_info', 1, {opacity: 0});
  9. Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around this?
  10. Hi, I have tried searching around for this issue but seems like no one ever encounter this. There is a visual glitch when I'm tweening z property of a jpeg loaded with ImageLoader. If I remove the z from the argument, the image will display fine. The glitch is like broken image (if you google 'visual glitch image', most of it display almost same as what I have now). What is more confusing is that the glitch only appear on Windows but not on Mac OS. If if test the movie in a Windows computer, it will display just fine, only when it is published as air application the glitch will show. I use Adobe Air for Desktop v23. Does anyone have clue about this?
  11. Hi, I have animations working on a loop of 2 and then on last loop the last animation should stay on. But this is not happening Basically, the last .from shows the duration and then fades, but I haven't added a .to for it to fade, so then it should stay, no? Can anyone help? Code: function initAnim() { console.log("INIT ANIM"); if (loop < 2) { tl.pause(0, true); } tl.play(); tl.set(truck, {rotation: 51, x: 118, y: 83}) .from(truck, 2, {x:-150, y:250}) .from(line1, 1.5, {autoAlpha:0}, "-=0.5") .to(line1, 0.5, {autoAlpha:0}) .from(line2, 2.15, {autoAlpha:0}) .to(line2, 0.85, {autoAlpha:0},"leave") .to(truck, 0.75, {autoAlpha: 0},"leave") .from([line3, line4, cta], 4, {autoAlpha:0, ease:Power4.easeOut}, "last") .call(loopCheck, ["param1"], this) } function loopCheck() { if (loop >= 2) { console.log("END"); tl.pause(); tl.invalidate(); } else { // tl.to([line3, cta, line4], .4, { autoAlpha: 0, onComplete: initAnim }) initAnim(); } loop++; }
  12. Hi, I have been trying to figure out why all my text is showing for like 1 second and then disappears and the animations start? I am using: tl.set(truck, {rotation: 51, x: 67, y: 110}) .from(truck, 1, {x:-150, y:250}) .from(line1, 0.5, {opacity:0}) .from(line2, 2.15, {opacity:0}) I do realise if this may sound like a really simple question. I have even put each copy text in individual divs and given them opacity 0, but still that doesn't work. I have set and image to slide into the banner (truck), then the copy should appear. But that is not the case. We have all the copy showing overlapping each other, then the truck sliding, then copy hides and starts the animation. Any suggestions?? Thank you
  13. lynette

    pause onclick

    Hi, Is there a way to add an pause onclick? Here is my code: var $container = $("#container"), $content = $("#content"), $bg = ("#bg"), $panel1 = ("#panel1"), $panel2 = ("#panel2"), $panel3 = ("#panel3"), $line1 = ("#line-1"), $line2 = ("#line-2"), $line3 = ("#line-3"), $line4 = ("#line-4"), $btn = ("#btn"), $exit = ("#exit"), tl; var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=2.25") .to($line1, 0.5, {opacity:0}) .from($line2, 2, {opacity:0}) .to($line2, 0.85, {opacity:0}) .from($line3, 2, {opacity:0}, "go") .from($line4, 2, {opacity:0}, "go") .from($btn, 2, {opacity:0}, "go")
  14. Such as dealing of cards. You are doing a similar animation but each element ends up in a slightly different position. I know I can animate them one by one and delay each one slightly like in the example code below but is there a shorter and more effective/elegant way of doing this? Thanks in advance! .to('.element1', 1, { x: "+=30", ease: Power3.easeInOut }, "frame1+=1") .to('.element2', 1, { x: "+=60", ease: Power3.easeInOut }, "frame1+=1.15") .to('.element3', 1, { x: "+=90", ease: Power3.easeInOut }, "frame1+=1.25")
  15. Is it possible to target a specific tween in a timeline and not have it go in reverse when the timeline's progress is going from 1 to 0? function createTimeline(progress, ...elems) { let tl = new TimelineMax({ paused: true }); tl.add('beginning') .fromTo(elems[0], 1, { x: '-100%' }, { x: '0%', ease: Power0.easeNone }) .fromTo(elems[1], 1, { y: '100%' }, { y: '0%', ease: Power0.easeNone }, 'beginning') .add('middle') .fromTo(elems[0], 1, { x: '0%' }, { x: '100%', ease: Power0.easeNone, immediateRender: false }) .fromTo(elems[1], 1, { y: '0%' }, { y: '-100%', ease: Power0.easeNone, immediateRender: false }, 'middle') .add('end') .progress(progress); return tl; } I am using a dragging/swiping callback to control the progress of my timelines, but I'd like to, regardless of the direction of the progress, have the tweens associated with elems[1] to always go from y:'100%' -> y:'0%' -> y:'-100%'. Right now, if the progress is going from 1 to 0, the tweens associated with elems[1] go from y:'-100%' -> y:'0%' -> y:'100%', which makes sense, but it's not what I'm looking for. I can make a CodePen if that would help. Thank you! EDIT Heres a CodePen: http://codepen.io/TrevorRice/pen/YGbyvv/?editors=1010
  16. Hello, It's my first time posting here, so apology if it's not done correctly. I have a problem. I have a game where I interpolate, via TweenLite, the position of a sprite. I interpolate the position of its box2D body to be precise. Even though the tweening in itself works fine, once I kill the tween, it puts back my object at its initial position and I can't figure out why. I am sure it's something stupid, like a param to pass, but can't find it in the doc. Maybe there are issues when tweening with box2D ? Thanks for your help. Code: var fromX = ((BALL_SIZE * BALL_SCALE) / SCALE) var toX = ((STAGE_WIDTH - (BALL_SIZE * BALL_SCALE)) / SCALE) g_tween = TweenLite.fromTo(g_ball.sprite.body.GetPosition(), 3.0, {x:fromX}, {x:toX, ease:Linear.easeNone, onComplete:onTweenComplete, onReverseComplete:onReverseComplete}); function onTweenComplete() { g_tween.reverse() } function onReverseComplete() { g_tween.play() } // *********** // Callback when user click on the screen // The game release the ball if it hasn't been released yet // *********** function onMouseDown(event) { //var newBall = new Ball() //g_sprites.push(newBall) var x = g_ball.sprite.body.GetPosition().x console.log("x: " + x) g_tween.kill() g_ball.sprite.body.GetPosition().x = x console.log("g_ball.sprite.body.GetPosition().x: " + g_ball.sprite.body.GetPosition().x) g_world.SetGravity(new box2d.b2Vec2(0, 30)) }
  17. Hi I would like to tween a <div> with a 25px border so that it shrinks in from the right. I know when animating I should really use the scaleX property, but this shrinks the vertical borders of the div. The obvious work around in terms of keeping the border thickness uniform is to use the width property, but I can't set a transformOrigin on the width property, so I've used a hack and basically increased the right: px; value to counter this. Here is the codepen to illustrate this: http://codepen.io/pauljohnknight/pen/qagBWY Is there a more efficient solution to this i.e. how to reduce a div in size on its x-axis so it reduces in from the righthand side, without affecting the border thickness? My main concern with doing it this way is the janking / flickering in the animation when integrated into the site it will be on. P.S the pen is linked to a scrollMagic scene, so you will need to scroll to see the effect. Thanks in advance for any help / ideas Paul
  18. Hi all I'm encountering some jittery animation on chrome while animating the scale of a div using TweenMax (as well as other tween engines). In the codepen, the div with the image is encapsulated inside other divs in order to reproduce the conditions of the project I'm working on. I also put a css animation counterpart that doesn't have that jittery effect. I'm wondering why it is only happening with js tweening engines... I'm only seeing it on chrome (win & mac), it works nice on ff and safari (haven't tried edge yet). Except on ff mac, I get the jittery effect when i'm hovering the div. Do you also have that problem ? Is there a workaround ? I tried the "z" attribute and also put a translate3d on the parent. Thanks. Thomas.
  19. 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?
  20. 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!
  21. Saw this website http://www.invstr.com that uses Greensock. I was wondering how the background ticks(grey rectangles) were in a animated loop that when they past the viewport they automatically started at the top again... could that be achieved somehow with modifiers plugin like the carousel wrap example? Thanks
  22. 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.
  23. Let's say we have a tween animation already added to a TimelineMax instance. The Timeline is looping (infinite repeat) but while watching it loop I want the user to have the option to check out some other ease options. Is there a way to dynamically add/replace the ease values to an existing, running tween? Or would I need to completely replace what's there?
  24. Hi, Having a standard bootstrap progress bar — is it possible to actually tween it's value. i see over complicated things online, but not a simple progress bar without alternations. Hence the question. <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow="0" aria-valuemin="90" aria-valuemax="100" style="width: 90%"> <span class="sr-only">90% </span> </div> </div> So how would I simply animate it's value? Any tip is greatly appreciated. My apologies if this is already covered, however I couldn't find the answer for this simple example. Thank you for your help.
  25. valiz22

    Rotating Words

    Hello, I am trying to reproduce the banner section from this website: https://www.triprebel.com/. In the codepen file (http://codepen.io/valiz22/pen/rerwxL) I have what I succeeded so far. Could anybody help me? Thank you!
×
×
  • Create New...