Jump to content

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


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. This might not the right forum, but would appreciate any thoughts. In my codepen I am animating a div with an image in it. The issue is that I am animating my div left from 100% to -100%. However -100% is WAY longer than when the rightmost edge of the div is off of the screen, adding extra time. I essentially want it to end up at right: 100%. Is there a way using CSS to get it to stop at the equivalent of right: 100%, but while animating left? I was able to solve the issue by calculating the values dynamically on window.resize and killing and redeclaring the tween. Surely there
  2. I'm working on a single page design that when I click between the NAV items in a dropdown menu, it tweens all the headers to a new name that are lists. I'm having an issue with Tweens on a click. The codepen has the current example. 1. If you click "clients", it Tweens the top header down and clients appears 2. If you click "profile", it Tweens the top header back and the default Name appears 3. If you keep clicking between the two, it still moves back and forth, but it loses it's Easing effect. I'm trying to do this between four headers, but I was just trying to get the initial
  3. Hi i have multiple div like #animate123 when the cubic beizer ends the the div will disappear (smoothly reduce the width and height or scale till the bezier track ends) var tween = TweenMax.to("#animate123", 5, { bezier:{ type:"cubic", values: [{"x":178.853394,"y":292.738353},{"x":178.853394,"y":292.738353},{"x":461.554575,"y":189.214815},{"x":640,"y":255.010604}], autoRotate:["x","y","rotation", 0, true] }, ease:Power1.easeInOut},{className: "+=fish"}); please help me
  4. I've got a number of timeline functions that are set inside of an object so that I can call them programmatically. You click a button with a number as a data attribute and it call a timeline method on one of these functions, like functions.function1.play(). I can get them to play(), but reverse() doesn't work. Am I missing something simple? var box = document.querySelector('.box'); var play = document.querySelector('.play'); var reverse = document.querySelector('.reverse'); var functions = { scale: function() { //console.log(this); var tl = new TimelineMax({paused: true})
  5. Hi, I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this: @keyframes { to { transform: translateY(-100%) translateY(100vh); } } This proved to be a crossbrowser way in CSS instead of: transform: translateY(calc(-100% + 100vh)) .Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly: var value = -$('img').height() + $(w
  6. Hi everyone! I am working on a project at the moment, and I am using this code snippet: TweenMax.set(convertForm, { y: -30, autoAlpha: 0, force3D: true }); *Note I have tried without the force3D too. And it is generating the following CSS: visibility: hidden; opacity: 0; transform: translate3d(0px, -30px, 0px); However the problem I am having is that the transform doesn't have any vendor prefixes, how can I change this, as I need the animation to work across multiple browsers. Many thanks in advance!
  7. Hello, i'm trying to make splittext animation on scroll using scrollmagic, the animation works but every animations are playing when windows is load, and i want my animations works when the parent section of my "content__text" div is in the viewport Anyone can help me to fix it ? http://codepen.io/AdverisTeam/pen/aJebRJ
  8. Hi I have problem when animating with CSS calc(). It's just jump to new position, without delay and animation. Is there any special way to do css math when tweening? How to make tween relative to viewport or container?
  9. Hi all! I'm noticing an issue with GSAP merging in transform properties originally formed in the CSS. I've attached a CodePen to show the issue. In Chrome, you'll see that both Dropdowns align to the center as intended. But in Firefox, IE11, and Edge -- it looks like the transform matrix that is generated is not including the calculated width of the dropdown component when transitioning. We can't use fixed widths (in the example that works) for a certain application, and found it really odd that only Chrome and Safari are handling this alright. Let me know if you need anymore info. Thanks
  10. Hi Guys I have a simple Tween that I'm linking to a scroll magic trigger. I'm unsure if my problem is GSAP related or Scroll Magic (if it is a SM issue I appreciate this is off topic). Basically I have GSAP and the GSAP for SM plugins running (i've copied the stacking order for the scripts into the codepen JS settings to mirror what i have running on the site), and I would like it so when the user scrolls the tween is fired. What is happening though is the Tween I have loaded into the scroll magic controller if firing on page load. I've made a really simplified version of the prob
  11. I tried to add a border to a banner Ive made, but none of the tries worked i tried .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"}) I tried with an inset and i get the same effect but I dont want it to be transparent. .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. Here is my codepen
  12. Hello All, We're using ScrollToplugin and Tweenmax library with ScrollMagic plugin,noticed TweenMax-> Scrollto operation not working. I want to pass OffsetY on the pinning element but TweenMax - offsetY parameter not accepting also scrollTo-> Y option not working with element-id only working with numeric value. As mentioned on the greensock tutorial (https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/) for add some margin top we can use offsetY option with numeric value but unfortunately its not working,no any error in console log . Please see this code-snipp
  13. Hello there, How would I go about creating 'masks' on the sides of my page where the elements slide in? I see this done very well on this infographic https://www.ceros.com/examples/visage-data-storytelling/ Thanks in advance EDIT: Obviously I am new to use lots of tweens on 1 page - is there a way I can minimize my code? Cheers
  14. Hello I've got five Box and five buttons. I want the first button, the display Box1 and other boxes are hidden. Button 1 => Box 1 Button 2 => Box 2 Button 3 => Box 3 Button 4 => Box 4 Button 5 => Box 5
  15. I'm desingin the web site that it's structure is like scrollmagic. what do i have to do to make the tweenmax animation codes play when it arrives at anchor(#sample)?
  16. Hey I'm currently working on a touchscreen which let's say for simplicity sake, just has a fullscreen bitmap image, the image is of a book and I wan't to be able to zoom into certain parts of this old book. Around this bitmap of the book, I've placed invisible DIV's to click on, when clicked, I would like the entire bitmap, to center the invisible box, by scaling up the entire bitmap. Basicly like the Zoomooz.js library, but I just know there must be a way to do it with GSAP ................. ................. . .
  17. Hi I'm going to be adding an image gallery to a site and I basically have it so that when you click on an image, the image is cloned and reappears in the centre of the window. The codepen is here: http://codepen.io/emilychews/pen/YZGxWZ I would like it so that the cloned image goes through a transformation to arrive in its new position. At the moment when you click on the image, the clone just appears in the middle of the window. I can't seem to get my head around how to have it so wherever the image is on the screen, it smoothly transitions to the central position. I tried swapping ou
  18. Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollM
  19. I've been working on an animation that works standalone as expected on scroll, it basically staggers on scroll so each path in my SVG animated in fast fade on scroll down, and fade out on scroll up. I was looking at this article but cannot work out how to import the scripts and get it running via RequireJS like I can standalone: https://github.com/janpaepke/ScrollMagic/issues/160#issuecomment-59058452 Here is my code example, it's WIP so the code is not absolutely correct yet. require.config({ baseUrl: '../ScrollMagic/js', paths: { TweenMax: '_dependent/greensock/TweenMa
  20. OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows. Just to make sure it's working, I added this test code to a page's footer code: <script type="text/javascript"> var blinkText = document.getElementsByClassName("blinking"); function blink() { TweenMax.to(blinkText, 0.3, { autoAlpha: 0, delay: 0.3, onComplete: function() { TweenMax.to(blinkText, 0.3, { autoAlpha: 1, delay: 0.3, onComplete: bl
  21. Hi all, like the topic already mentions do I have a problem with stuttering animations inside my TimelineMax animation and it would be really great, if somebody of you could help me. I'm currently developing a system for our company in which images and videos of our work can be uploaded/selected with the help of a CMS. These media should be animated afterwards, so that it looks like a dynamic generated showreel. So I used PHP to dynamically generate the JavaScript code and basically it works, but as you can probably see in the Codepen or in the demo, especially in Chrome the animations ar
  22. GreenSock Community, Thanks for taking the time to read this post, also thanks in advance for any help you may provide. I have a modal that scales up a selected thumbnail into a scrollable slide container. Please note the CodePen only has the "Advil" link set to call in Ajax content (HTML and JS) from another CodePen Ajax-Modal-Content I have two problems with the Tween Path: The starting position does not seem to be the correct coordinates, despite my using that part of the code exactly as what the original example is using (see getPosition function and the rect var). I'm having
  23. Hi, We are having issues trying to finesse a card folding animation. Basically we would like to have a square with sides folding out from within the square to create an unfolding effect. If you take a look at the Codepen you should be able to get an idea of the effect. We are currently using scaleX but unsure if this is the best and way to achieve this type of effect? Many Thanks
  24. Dear Greensock Community, my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this: TweenMax.to("#rotationFrame", .5, { rotation:rotationDeg, transformOrigin:"50% 50%" }); This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff: Demo: https://vid.me/9EJU How can I solve this? To me it seems like Greensock is creating some wired css code, like transform-origin: 0px 0px 0px; transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 95
  25. I'm looking for any suggestions as to what might cause the bug I'm currently experiencing in TweenMax 1.19.1 -- I've run out of ideas. Here are the basics: I'm doing a TweenMax.staggerFromTo transformation that simply moves several elements from -20px and 0 opacity to 0px and 1 opacity. The classic "fade in from the left." The animation runs perfectly except that, with the most recent update to TweenMax, the opacity portion of the tween is being skipped altogether. The opacity of the elements is never modified and, even with clearProps not being used, opacity is not left in the Styles attr