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. I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the
  2. Hi there, Actually I am trying to achieve an animation using morphSVG plugin which is a scroll down indicator, as you can see in this pen which I prepared what happens is that the two SVG rectangles morph from top to bottom and that is fine but what I exactly trying to do is that after this step I want them to morph back again from top to bottom and not from bottom to top! Please advice, PS. I could not add the morphSVG plugin to this pen. Regards.
  3. Hi, I am wondering what's the relationship between stagger's duration and stagger's staggerDuration. Looking at this code: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25}). The time duration is 1 but there are 3 elements to stagger. mc1 = 0.25, mc2 = 0.25 + 0.25 mc3 = 0.25 + 0.25 + 0.25 1 - 0.75 = 0.25 (What happen to this extra 0.25?) - Is the duration the total duration for the whole stagger code (mc1, mc2 and mc3 combined?) And the stagger duration will modulate to fit within the whole duration? Thanks, Venn.
  4. Hi Is it possible to have a container automatically resize it's height when a div inside of it is moving outside the container's height? in this pen - http://codepen.io/beamish/pen/LNXYGN - will it be possible to have the blue containing box automatically resize it's height when the contained red smaller box reaches the blue box bottom? Thanks, Elior
  5. I am using TweenMax to animate the appearance and scaling of a Popup. It works fine in one view, but in another it occasionally does not appear until after the user starts to scroll the page beneath the Popup. The popup is just a div with three lines of text in three p elements. The animation of the popup is done as follows: var clickPos = String(event.detail.x) + 'px ' + String(event.detail.y) + 'px'; that.rootNode.appendChild(that.viewRoot); TweenMax.set(that.viewRoot, { scale: 0 }); TweenMax.to(that.viewRoot, 0.7, { scale: 1, transformOrigin: clickPos, immediateRender: true });
  6. Hi everyone First, shout out to Diaco and rest of the Greensocks heroes. Thank you. I've enjoyed working with your script and all the answers you've provided here have been most useful. My WIP http://goo.gl/RWzDCK the js in the site is not yet optimized. I'm optimizing it on my local server. And here are the questions. 1) I'm animating a timeline of objects. Since there are other instances of these objects being used later on, I'm defining them before using them in my timeline. The problem is, there are some objects that are being generated based on conditions (for example, ".penci
  7. Hello, First of all thank very much for this incredible tool! I am an absolute noob developing animations (and web pages) and thanks to GSAP I've had to do so little efforts to learn . I am trying to rotate a image and control the animation, very similar to the Ferris example: http://codepen.io/GreenSock/pen/wBbKs?editors=1010 The user can select if the rotation is clockwise or counterclockwise. This is my question: is it possible to do a infinite reverse loop without TimelineMax, just a TweenMax instance? The problem is that, related with this rotation, I am drawing a sin
  8. I am implementing a web page with Parallax scrolling. I have referred a code from net. Here, I am having html { overflow: hidden } which is preventing me to smooth scroll to a particular div in my HTML. I tried using GSAP, but html { overflow: hidden } is not allowing to get the desired effect. But when I remove it, scroll works perfectly but, parallax effect doesn't happen. Following is my code for reference. Please someone help & let me understand the reason behind it. CSS @import url(http://fonts.googleapis.com/css?family=Nunito); html { height: 100%; /* OVERF
  9. Hello, Yes - I'm still using GSAP for Flash (It's awesome) - so I'll post my question here, even though it's very relevant to the Javascript version too. I'm sure some of you (especially the GreenSock folk) know about google's UI experience guidelines. Here's a link: https://www.google.com/design/spec/animation/authentic-motion.html Specifically, the authentic motion ones are very critical. It makes a night and day feeling when it comes to using apps and games. I'm wondering, to the Tween experts at Greensock, is it possible to do asymmetric deceleration like in the Mass an
  10. Hi guys, I'm building a bit of unique accordion where the sections are cards that swap on top of each other. the idea is to have the top one stuck to the top at all times. In order to set this layout up I've made the wrapper position relative with the sections position absolute with a top of 0; I'm making the tops of each section offset using translateY via js because the accordion needs to be dynamic. I'm almost there it feels but I can't seems. Howver my challenge now is to make is so when you have slide 1 open. if you swipe up from slide 4 to have slide 3 and 2 track up wards with
  11. Hi! Think I found a bug of some sort that if I add a class name using TweenMax and my tweening object has already a classname that contains the same word it removes. Example: Want to add a class by name: "hover" My div has classes: <div class="btn animate-hover color-green">My Button</div> The result will be: <div class="btn animate- color-green hover">My Button</div> It shouldnt behave like that am I right? If using underscore it works: <div class="btn animate_hover color-green hover">My Button</div> Possible to solve this?
  12. I have a very simple setup with two elements tweening right and left. One is using 'x' and 'force3D:true' while the other is simply using 'left'. Both seem to 'stick' as they move across the page, looking almost laggy. I'm running Chrome 49.0.2623.110 (64-bit) on OSX 10.10 and TweenMax 1.18.0. I even recorded the browser with quicktime and you can see it in the video, too. Is anyone else getting the same result?
  13. Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative a
  14. I've created some morphing icons that morph back and forth with different easing functions on .mouseenter() and .mouseleave() (using jQuery .hover method) I'd like to force the Tween in my hoverOver functions to complete before the hoverOff function is allowed to start. I'm a little stumped on how to achieve this. Can anyone point me in the right direction of how to do this?
  15. Hi, I want to collapse a <hr /> and then open it again, please see the codepen. First problem is that setting the width to 'auto' is not quite working. Next Problem is that the hr collapses towards the left and not to the center. Any suggestions? Thanks in advance!
  16. Hi everyone, This is my first post here. First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for. Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations. The problem: When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it
  17. Hey everyone, Image you have a cartoony chess game. And you're sliding the queen from one end of the board to the other. I want to add a teetering effect, with the piece pivots on it's base a bit to begin it's slide, and then teeters in the other direction when it ends. I have the pivot centre at the bottom center, but I can't seem to find an elegant way to pivot back and forth. So what I've done is: var maxTilt:Number = 10; // degrees var slide:TimelineLite = new TimelineLite( { autoDispose:true } ); slide.add(TweenMax.to(obj, DURATION / 4, { rotation: -maxTilt} )); slide.add(Twee
  18. i want to make a animation where circle is created randomly using canvas and i want scale all the circle at the same time with their origigin X and Y. please help me solve this issue . i have generated the circle but they were not scaling when i scale property it scale the whole circle as a single object. please help me thank you. here is a codepan link http://codepen.io/rk25028/pen/QNObbd please solve this i want every circle should scale.
  19. I have to move the small circie on the path. the circle emits animated flying circle when continuous clicked. I want to When I continuous click the button,the every circle would complete the animation one by one. But,in my code,when I continuous click the button,the circle's animation will stop. I did not want results. Please find the code on codepen Thanks.
  20. I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?
  21. I have a timeline which moves the x position of a really long div to the left. When you hover over a button it will trigger the timeline. However, I can't seem to get the timeline to move continuously. I've tried setting a repeat and an onComplete function to loop the timeline but neither of them worked. I did manage to move the long div using setInterval but when you mouse leave the button the tween animation doesn't stop instantly. Here is a codepen of the setInterval example - http://codepen.io/anon/pen/GZvLVp and here is a codepen of the timeline example - http://codepen.io/anon
  22. I am following the iHateTomato course and try to modify something. I want the main timeline to stop at the end of all the stagger effect like so: .staggerFromTo($pixel, 1, {autoAlpha: 0, cycle: { scale: ['0.5', '2'] }}, {autoAlpha: 1, scale: '1', ease: Elastic.easeOut.config(1, 0.3)}, 0.3, pauseProjects, [projectClass]) .add('pixelsIn') And the pauseProject function is function pauseProjects(projectClass){ console.log ("Main timeline pause!"); tlProjects.pause(); } It is throwing this error: TweenMax.min.js:16 Uncaught TypeError: b[a].apply is not a function And t
  23. Basically I have a TimelineMax that is populated by some TweenMax. TimelineMax might be triggered multiple times by TimelineMax.restart(). On event window.resize() some vars of TweenMax are updated by TweenMax.updateTo(). All works fine when TimelineMax has not been started. But updateTo() seems to not alter given vars after TimelineMax has been started the first time. Have a look here: http://codepen.io/anon/pen/mJKwJj I) Initial x position is set to 700. II) X position is set to 100 before first restart(). III) This new property is set perfect. IV) All following updateTo() hav
  24. I'm trying to create a parallax effect by animating the background y of an image. I'm planning on using ScrollMagic to manage the duration property and feed this object to it. I'm making a ```new TweenMax()``` however it's ignoring the ```immediateRender: false``` property and beginning its animation right away. var tween = new TweenMax($("#parallax1"), 1, { backgroundPosition: "0px 200px", ease: Linear.easeNone, immediateRender: false }); Can anyone tell me why this isn't working?
  25. Hi, I'm working on an animation where I animate the scale, and other properties of the body tag. The scale goes from a value of 1 to a bigger value to create an effect like in Prezi, to zoom in to an element of the page. Just as is, this makes the element shown very blurry, but I found out if I set the tween's force3D property to false, it will be sharp (good) at all times. But this also makes the whole animaton very laggy. I tried to change the force3D property while animating, so it renders only a few times during the animation, to both avoid blurriness, and lag, but I don't know how to
×