Search the Community
Showing results for tags 'TweenMax'.
-
Hi, just wondering if anyone can suggest / advise how this site can be done? When click on the menu it because a task manager view kind. Looks cool. http://www.vangardemusic.com/
-
Hi there, Just a quick question. Is it possible to create a flicker effect when images fade using the autoAlpha: 0 effect? Something like this... (I thought Elastic would help but it didn't.) TweenMax.to("#div", 1, {autoAlpha: 0, ease:Elastic.easeInOut}) Thanks, Phil
-
Hi there, Is there a basic way to calculate the length of a TimelineMax animation? I do alot of banner work with Greensock and publishers have strict 15sec limits. I can't find an example anywhere. Thanks, Phil
-
A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
-
Here's my sample code. Pretty simple. Yet it doesn't work on my server. I don't see a coding problem. Do I need to change a server setting? Url is www.leadsgopro.com. Please help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> body{ background-color: black; } html, body, #container { width:100%; height:100%; } </style> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script> TweenMax.to(".logo", 2, {left:600}); </script> </head> <body> <div id="container"> <img id="logo" class="logo" src="http://gravatar.com/avatar/5a224f121f96bd037bf6c1c1e2b686fb?s=512" height="150" width="150"> </div> </body> </html>
-
Hi, I'm fairly new to GSAP, but I'm really enjoying experimenting with it. A hurdle I have come up against is how to hover over a specific div, and have an animation play based on which div is hovered over. I do not want to have to write the animation for each div. I know the way to do this is to use the jQuery selector 'this', but I can't get it to work for a timeline. I can get it to work using TweenMax.to('') etc, but I want to be able to use play() and reverse(), and so need it to work with a timeline. Rather than me babbling on, it's probably best to just check the codepen. Thanks for reading, and I hope you can help!
-
Hi team, If I have a master timeline that contains 3 smaller timelines. Let's say if I want to change the start time of getPinTimeline so that it overlaps on the timeline of getRotateTimeline. How can I do that? var mtl = new TimelineMax(); mtl.add(getSpinTimeline()) .add(getRotateTimeline()) .add(getPinTimeline()); Cheers, Venn. -
Can Greensock TweenLite/TweenMax globals be obtained when using the library as CommonJS module? E.g. easing functions that are available as window.com.greensock.easing, like let Power4 = require('./TweenMax')... I feel myself 10 years younger when I look at all these globals. I look at the source code and see that the only export is TweenMax constructor. Can it be done somehow without resorting to globals at all?
-
Trying to use some TweenMax animations on a couple of Joomla! sites, versions 2.58 and 3.x I ordinarily just add the TweenMax.min.js to a site somewhere in the headers, and it's no exception with Joomla. A custom template, code inserted into the index.php file, thusly: <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/TweenMax.min.js"></script> </head> That apparently works without tripping up anything. But when I try to use a small .js file with theTweenMax script (inside a Joomla custom module) that relies on the TweenMax code, nada. Nothing much around here that addressed this issue. Does anyone have some idea of how to make TweenMax behave with Joomla? TIA!
-
Hey there. In my Project I use allot of Tweens. At a specific point it wish to reset all current tweens excluding a select few. I wish to store a variable on these Tween to exclude so when resetting all the current tweens these can be tracked an avoided. I've tried this sofar but when assigning the failed tag SStimer return undefined. Yet I can access this tween when using TweenMax.getAllTweens()[index]. Am i Missing something major here? trigger.SStimer = new TimelineMax({delay: 180}) .call(function () { console.log('Slow selection fired'); delete this }); trigger.SSTimer.failedTag = true;
-
Hi everyone, I'm trying to animate two paths at the same time using svg paths and javascript, but seems something is not right with my codes where I can't find out what is missing. I want each box to run on the different paths. Any idea/s what is wrong with this code? See on codepen: http://codepen.io/anon/pen/WrQeOp Thank you very much in advance. Kind regards, Fernando Fas
-
Hi All, I have looked through this forum here, but I didn't quite see this discussed. I want to change the easing type between a play() and reverse() animation on a TweenMax. However, it seems to change the ease type only once, and all subsequent attempts to use updateTo seem to do nothing. I did find a really hacky way around the issue by adding tween._ease = tween.vars.ease; after the updateTo. You can see this in the CodePen by uncommenting line 4. That does not seem like the right way to actually do this. This feels like I'm just missing something simple, but I've looked at the docs and Googled around and I don't see where my error is.
-
l have just added tweenMax to a site that l am building and l am realising a clitch a page jump on load. anyway that we can resolve this please?
-
I'm trying to come up with a lightweight "news ticker" type of animation. Just maybe 2 different lines of text, one replacing the other in a loop. No problem with the looping or the use of the TextPlugIn. But the docs allude to how one can create custom delimeters to change the way the animation works with the text. I've played around with the jQuery news tickers out there, but thus far, none of them seem to work reliably in the context of a client's e-commerce site, which apparently was constructed by someone who had no real concept of good HTML5 coding practice. I have a different TweenMax animation running on that site now, so it wouldn't be an issue to just write a different TweenMax animation - it just works. How do custom delimeters for theTextPlugIn work? TIA! -
I am trying to make an arrow flip horizontally using SVGMorph... however, it doesn't look like it's flipping. I tried changing the ShapeIndex but there's none that will make the flip look natural. Codepen: http://codepen.io/anon/pen/dGbOLZ Is there a better technique to do an SVG flip that will work on all browsers?
-
Hi GSAP team! I have discovered your GreenSock.js few days ago and really got impressed - nice work! And I have started playing with simple TweenMax from & staggerFrom examples, but along the way got some strange results. ---------------------------------------------------------------------------------------------------------- So, here is my basic work so far: EXAMPLE 1: TweenMax.from(".explodedLogo.letter_O, .explodedLogo.letter_o", 1, {delay:1, rotation:22.5}); RESULT: http://i.imgur.com/s5BT3SD.gifv EXAMPLE 2: TweenMax.staggerFrom(".explodedLogo", 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2); RESULT: http://i.imgur.com/RUjryaG.gifv EXAMPLE 3: COMBINED TweenMax.staggerFrom(".explodedLogo", 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2); TweenMax.from(".explodedLogo.letter_O, .explodedLogo.letter_o", 1, {delay:6, rotation:22.5}); RESULT: http://i.imgur.com/Os0G4EF.gifv Sorry animated gifs are - ironically - not allowed in the editor So, when I try to combine those two in a sequence, the rotation in .from get distorted position. Why does this happen? I have also tried with a timeline sequencing, the problem remains the same. Is this a bug or am I doing something wrong here? ---------------------------------------------------------------------------------------------------------- Also, I have discovered that CSS (and CSS animation) always precedes tweens, which means that if I set opacity to 0 in my CSS regardless of the animation opacity levels, entire element will be invisible. Is this by design? Can this be over-ridden so that animation takes over CSS somehow? ---------------------------------------------------------------------------------------------------------- Final question - How do we control the moment our animation is going to start? I am targeting the page load/rendering here, specifically. I have discovered that many times, when page does not load+render completely, the animation already starts executing in the background, which means that user may never see it happening. Once the rendering of the page completes, all it will see is just finished animation (e.g. last frame) as if it never happened. I tried to solve this with: window.onload = function() {} But, this created at least one problem: as you can see from the animated GIFs, I use a custom font. However, with onload wrapper in Mozilla Firefox, the animation displayed an ordinary letter "O" for a split of a second upon initial page load/render, than removed it, and only afterwards the animation got executed as it should. This was not happening in Chrome and other browsers that I have tried. So, again, that is undesired behaviour, possibly a bug in Firefox, but I really want smooth and universal solution that will work. So, I removed this method and reverted to the good old delay. By the way, the website is here, so you can see the basic version I currently use. ---------------------------------------------------------------------------------------------------------- I know I probably ask a lot in my first opening post, but I really appreciate your help Thanks, Regards
-
I'm trying to do an autoalpha switch with a navigation. To prevent the page from getting too crowded, I'm tweening autoalpha for the appropriate content when the nav element is clicked. I've created a loop to create the timelines and listeners, and then calling the timelines on the appropriate "titles" click. Right now, the tween works if you click the titles once each, but if you try to switch back and forth, the timelines are no longer tweening.
-
I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>
-
Hi, guys. I am quite new to GSAP. The system is really solid, however, I ran into a small problem. I am trying to animate the X property of the the main container and text in it. Basically, I want to make a nice slide out menu. THE PROBLEM: The black background slides out really nicely, BUT, the text starts sliding out as normal, but then jumps at the end as if it was skipping something. I cannot figure out what is causing that. I would be really grateful If someone helped me out, because I feel like I am missing something really fundamental here. Here is the code: Codepen: http://codepen.io/arthurleonov/pen/ZbPrLX var menu = $('.js-menu'), menuContainer = $('.menu-container'), menuItems = $('.js-menu-items h3 a'); var tl = new TimelineMax({ paused: true, reversed: true, }); // set new timelinemax // container animation tl.from(menuContainer, 3, { x: '-1000', autoAlpha: 0, force3D: true, ease: Power3.easeOut }) // text animation tl.from(menuItems, 2, { x: '-600', autoAlpha: 0, force3D: true, ease: Expo.easeOut }); // toggle animation $(menu).on('click', function() { tl.reversed() ? tl.play() : tl.reverse(); }); Thanks in advance!
-
When I'm animating along a bezier curve, the object being animated slows down towards the end of the curve - you can see this very clearly in the attached Codepen which draws a series of dot along the curve to visualize it. The dots are more tightly clustered towards the end of the curve. Is there any way of changing this? I've tried changing the timeResolution but it doesn't fix this.
-
GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.css("top"), left: tween.target.css("left"), }); } tween.restart(); } Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. Happy coding!
- 4 replies
-
- 1
-
-
- bezierplugin
- tweenmax
- (and 5 more)
-
TweenMax to and TweenMax from Play around.
-
Hi All, Starting from 0 here. My boss has asked if a GSAP HTML5 Banner that use Smartphone Accelerometer is possible. The idea would be that i multilayered image with a foreground, mid-ground and background would 'move' with the tilt on a smartphone. Can anyone point me in the right direction? Thanks for any help, Phil
-
Hi there, I am starting from scratch here so apologies. I have been asked by a client to trigger an animation (similar to a banner ad) based on the browser position. It would be great if the animation then reversed on scroll up. Two Q's... 1. Is this possible with Greensock? 2. Where do i start? My Codepen example is an attempt at recreating the site that the animation will eventually live on. Thank you so much for any help, Phil
-
Can someone please help me fix this code that I found, I would like to use it in my assignment: the problem: on zoom in (ctrl+) and zoom out (ctrl-) the carousel goes crazy the code can be found at this address http://codepen.io/anon/pen/KdxJbP Any assistance would be greatly appreciated PS post responses here
