Search the Community

How do I get an svg object to go to the position of another one? I have been banging my head against a wall. Trying to get pink to follow draggable green. Any help would be great

I have this tween1 that should should work on click and then reverse in case I scroll back. My tween doesn't work, the click doesnt play and so the reverse doesnt work, so: -on click toggle active which will make the f active will have tween1.reverse() //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL var tween1 = new TimelineMax(); tween1.to(".click-element", 0.3, {className: "+=active", x: 500, paused: true }, 0) .to('#section-2', 0.3,{className: "+=darkblue", paused: true }, 0) $(".click-element").on("click", function(e) { $(this).toggleClass('active'); tween1.play(); }); var scene1 = new ScrollMagic.Scene({ triggerElement: "#section-2", offset: 50 }) .on("leave", function() { tween1.reverse(); }) .setClassToggle("body", "darkblue") .addTo(controller);

Basically, every time a tween is called in my timeline, I want to recheck the value to be tweened by. `generateValue` seems to be only called once. When I resize the window every time the tween is called it uses the value it first generated. Help would be very much appreciated! function generateValue() { var value; // if window is smaller than 520px if (Modernizr.mq('(max-width: 520px)')) { value = $window.width(); } else { value = 420; } return value; } TweenMax.to($myElement, .2, [x: generateValue});

Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating. The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well. Gray path is a rectangle, red one is nearly completed rounded rectangle with Bezier curves. The latter would be perfect but I cannot script the green rectangle to be centered on path at all times. So in general how to draw, position and/or offset an object so that it will move along the path by its center (centroid)? Having a group with invisible rectangle boundaries and then animating a group along the path? And yes, I have watched the excellent Note: I'm using svg.js for some easy creation of SVG elements. Intention is to script all to have rule base path creation and then animating objects over paths. Sure, the path rounded corners will be redone with arc commands :-).

There seems to be a slight flicker once the animation is finished. This only seems to happen with HTML Videos. I was unable to reproduce the effect with other elements such as divs or imgs. Has anyone come across this issue before?

Hi, I'm trying to make an element tween from off screen and land on a point while scaling down. I currently have the element scaling down and moving position but I don't want it to start scaling down until it gets closer to the red box. Any advice or guidance would be great.

Hi all, been struggling with this for a long time now. Is there a way to tween a draggable, more specifically a type:"scrollLeft" element's position by clicking a button? Think of a draggable, scrolling left and right carousel - with a button. When the button is clicked the draggable element slides to the right 300px. I know there are methods to enable and disable the dragging, but I don't see a way to target the actual moving element. Even to manually go in and target the draggable item with a tween might work... but I can't seem to even find what moves! Thanks for any help you can offer!

Hey, there! Is there a way to update the value inside tween when getting the animation reversed? For now I need some kind of fake preload animation, before modal window loads, so I'm using delay parameter with a variable value . But when I'm closing modal window (by clicking on a background layer), animation reversing but considering that delay. Is there a way to change that variable value on reverse?

I'm trying to tween an element that has a relative height and it sits inside a container with relative height using absolute positioning. The desired tween animation is to move the element from the bottom of the container until it reaches the center. I'm also using scrollmagic as this animation should only appear during scroll to this container. I tried a few ways first way: default css of the element is already absolute positioned to center, container { position: relative; } element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } get the height of the element and its container. Minus off the element height from the container height. divide result by *two pass this height as a parameter in tween created window resize function and update the heights and also refresh the scenes scene is updated but tween is not. The culpit here is Tween not refreshing the variables on resize. Second way: default css of the element is at the bottom of the container with bottom: 0; position is still absolute used a to tween with top: "50%", yPercent: -50 this doesn't put the element in the center it's not centered and it only moves slightly The culpit here is using bottom: 0; and that breaks the absolute centering. Without bottom zero it works but the element comes in from outside of the container. Is there a workaround to this? Please help. Thanks!

Hi ! I'm starting with TweenMax and got stucked with an issue. I have a menu which each links can start an animation but they can overlap and make the tween bug. I'd like each function to complete before being able to start another one. I've found that I should use onComplete but I don't get what I am suppose to do then. I've made a JSFiddle to demonstrate the issue I have. On .mouseover, the tween start but if I hover too fast on an other link, it bugs. :/

Hi All, Im trying to get 2 tweens to animate at the same time when I mouse in over a link, and to reverse the animation when I mouse out. Each tween is working correctly in isolation, they're just not workingvery well together at the same time. The 2nd time you hover, the 2nd tween just jumps between its start and end points, there is no animation at all. I tried adding the position parameter of "0" to the second tweens but it didn't solve the problem Any help appreciated

Hi Is there any way to make a timeline that is inside a function accessible outside of it? I have a short animation sequence used in different places on a site. I'd like to wrap the timeline in a function, but the problem is I'm also using scroll Magic. Thus the setTween method of scrollMagic needs you to pass the name of the tween in as a parameter. I tried using return with the timeline name (as return myAnimation) at the end of the function, but this didn't work. I've set up a simplified example codepen (link given above and minus the scrollMagic) to make it easier to illustrate any solution. I'm thinking there must be a way to make a timeline accessible outside of a function? Any help would be amazing. Emily.

Hello! I need to Tween a number from 0 to 53,5. Is this possible with GSAP? I-m trying and i'm having problems to count decimal numbers. var obj5 = {value:0}, element5 = document.getElementById("cantidadMujeres"); TweenMax.to(obj5, 1.4, {value:"53,5", ease:Linear.easeNone, onUpdate:function() { element5.innerHTML = obj5.value;}}); This is my code, the problem is that the counting number has like ten or eleven digits when init. And, if i add "roundProps:"value" " the decimal digit dont count. The is some solution to this? Thanks

Hi Guys, I stumbled on this post http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/ and implement the script there but not the result i wanted. Here is the script that $(function(){ var $window = $(window); //Window object var scrollTime = 0.3; //Scroll time var scrollDistance = 50; //Distance. Use smaller value for shorter scroll and greater value for longer scroll $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html autoKill: true, overwrite: 5 }); }); How to achieve something like this smooth page scroll on this page - https://www.shift-capital.com/about? Please help.

Hi I have gone through a lot of posts and found that tweento(getlabelafter()) will take me to the next label. But the issue is that it doesn't allow me to skip any tween and jump to the next label. Can you please have a look at the codepen n suggest a way to skip a tween so i do not have to wait for the tween to be over before going on to the next label

Hi, Wondered if anyone can help? I have text and i would like it to scroll from bottom to top, going off the banner view and then leaving it on the last text for like 2.5 seconds. How would I do this?? <div class="banner"> <div id="copyScroll"> <p> Lorem Ipsum is simply dummy text? </p> <p> Lorem Ipsum is? </p> <p> Lorem Ipsum is simply dummy text of ? </p> <p> Lorem Ipsum is simply dummy ? </p> <p> Lorem Ipsum is simply dummy text of the printing? </p> </div> </div> <script> var tl = new TimelineLite(); function anim() { copyScroll = document.querySelector('.copyScroll'); p = document.querySelector('p'); tl .to(copyScroll, 1.5, {y: '-400px'}); } </script>

New to GSAP, sorry if I'm missing something obvious, but I'm having a hard time understanding tween transformations. Please look at the codepen. I have three squares of dimension 10 at origin (10,10). Blue has been translated x+10 then scaled to half. Red has been scaled to half, then translated x+10. The black square I transformed using TweenMax.to() with x=10, scale=0.5 and it animates to a completely different location than the blue or red squares. I would expect it to either scale then transform, or vice versa. How would you explain GSAP g tweening in relation to basic SVG transformations?

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.

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

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

Hey, When animating an unknown number of elements like so: var timeline = new TimelineMax({repeat:-1}), items = document.querySelectorAll('.item'), startDuration = 20; for(var i = 0; i < items.length; i++) { var myDelay = (i * 0.5); animate(items[i], myDelay); } function animate(item, delay) { var a = TweenMax.to(item, startDuration, { rotationZ:'360', ease:Linear.easeNone, repeat:-1 }); timeline.add(a, delay); } What is the best way to modify the duration/speed of an individual tween? Thanks

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!

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.

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

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?