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. Hi, I'm not sure if this is related to the topic: https://greensock.com/forums/topic/15728-onstart-maximum-call-stack-size-exceeded-error/ I'm trying to build a fairly complex (I think?) multi-stage animation, and I've started getting the following error messages: TweenMax.min.js:16 Uncaught RangeError: Maximum call stack size exceeded at d.h.add.h.insert (TweenMax.min.js:16) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.mi
  2. Guest

    ScrollMagic - TweenMax vs Timeline

    I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You
  3. I have created a sliding portfolio gallery type of page and having the hardest time getting safari in particular to render smooth animations and scrollto's. I originally was using scrollmagic and tweenmax which was extremely choppy and could not be used, I re-wrote the page to use only Tweenmax and the ScrollToPlugin, it's much better now, but when I have the images visible, the page is still a bit choppy. I am wondering if there is anything I can do to up the performance. Link: http://melissamorgandesign.com/portfolio Here are the tweens that are going on, the trouble
  4. Hi I have strange problem with an animation that I can't get my head around. I have an animation that is dependent on window size - a simplified codepen is above and simplified code below. Basically it's set so that if the window is greater than 1024px the animation fires, if it is less than 1024px the else part of the conditional logic is set to an animation lasting 0 seconds to effectively prevent the animation happening. I've predominately done this because the elements change dimensions quite markedly on mobile so the animation wouldn't really work. At f
  5. Hi guys - To create a tween that animates as you scroll what do you need exactly? I am referencing both tweenmax and scrollmagic and I also added the gsap animation plugin. No matter what I do this doesn't seem to want to work. Please help!
  6. Hi Is it possible to add a staggerTo or staggerFrom to all the lines of text in a paragraph programmatically? I appreciate I could wrap all the lines in spans, but it's part of a piece of text that won't be fixed in size, so the number of lines will change dependent on device, window size. Also, is this a bad idea generally in terms of performance? I've included a codepen above with two paragraphs that are part of a stagger, but I was wondering about having each line stagger (note: if it is possible I would put all the text within one element / #id. I just did two elements
  7. I use Adobe Animate to put my canvases together, not sure if that makes a difference to what I am asking: I have the following code on my main timeline, and it works fine there, with buttons that are also on the main timeline. function buttonOver(theBtn) { thisBtn = theBtn; TweenMax.to(thisBtn, 0.1, { ease: Sine.easeOut, scaleX: 1.05, scaleY: 1.05 }); } However I am having difficulty doing the same thing within a child mc. I have a child clip that contains four buttons that I want to all use this function, and I hope to be ab
  8. Hey guyz actually i want to apply the jquery events method like mouseover,mousedown,hover method ,etc . I tried to use it but scale function is working but ease:Elastic.easeOut is not working. I know this is very small problem for tweenguyz but please help mi in it.Sorry for my bad english. here is my codewhere i have use scale function but when i have use ease function its not working.PLease help mi
  9. Hey there, i tried to set up a Codepen, but unfortunately i couldn't get it work ....i am basically using webpack and es6 promises as well as enqurie.js and scrollmagic with gsap to trigger different tweens/scenes and kill them when the breakpoint is changed, unfortunately i get a animation.tweenShowcaseDesktop.kill is not a function on a specific tween. Since i am not able to make it work in codepen here is the module where i trigger the tweens and scrollmagic : I know its a very long snippet and shot , but maybe someone will spot my mistake r
  10. Hey there, i am trying to reverse/change the color of a logo based on the section its in. I got it working so far but i am kinda wondering if its the right and most performant approach (i kinda guess it isn't) I basically wont to use it on different subpages and the number of sections is variable. Thanks a lot, much appreciated const controllerMobile = new ScrollMagic.Controller(); const innerStart = new TimelineLite(); const innerEnd = new TimelineLite(); const outerStart = new TimelineLite(); const outerEnd = new TimelineLite(); innerStart.to(
  11. Hello everyone, I hope the GSAP pros here can help me at my rather simple problem thats driving my nuts since 3 hours (!). I have elements on a page that have to change color and scale. After this I want to reverse the animation. I need to do this for about 4 different Elements. So each element should animate like this: 1-2-3-3-2-1 and start once the other is finished with a slight delay maybe. I already tried with repeat: 1 and yoyo: true but then it repeats the animation like this: 1-2-3-3-2-1-1-2-3-3-2-1 which I don't want … At first I tried it
  12. On my site, I am using a plugin inView, which calls a function when an element has come into view in the page. There is a div in the middle of the page, and i'd like to use this to fade in it and come from the bottom TweenMax.from(element, 1.5, { autoAlpha: 0, y: 100, ease:Expo.easeOut }) The thing is it works, however if I quickly scroll down to this div, I'll see it for a millisecond, a quick flash....and then the effect starts. I tried to use the .set function and set it to autoAlpha: 0...however now it doesn't even fade in at all. Is there
  13. Hi, I have a menu trigger button that appears on a page in more than one place, so i've used classes as the selectors. I've worked out how to loop through the classes and toggle different functions to be called using an if else statement, but I can't seem to get this to work with tween max tweens. I've commented out a tween in the code below, which does the same as the vanilla javascript that is inside the same function, but i can't get it to work. How do i get a tween to be called as a current target? Any help would be awesome. Emily As well as the codepe
  14. Hi, I am having problems animating with JavaScript. What I want the animation to do: All I want is that the logo, "TITLE" and navigation to have a fade in effect only (which it currently does fine). Problem: After the navigation element fades in, the logo and "TITLE" momentarily fades out and fades in again. I have been having a problem with Velocity.js as well. I think it might be something I am doing wrong. Any help on this would be appreciated. Thanks
  15. Edit: See below for the most legible version of the code! Hello, I'm trying to play a tween whenever the user stops scrolling. Eventually I'll play from 0-1 on scrolling down, and from 1-0 on scrolling up. Currently I'm experiencing some unexpected behavior however. See the code below. The `ScrollMagic.Scene` tells the component whether the user is scrolling up or down, and `scrollStop()` is calling the arrow callback whenever the user stops scrolling. Contrary to my tween config, the scene ignores `paused: true` and moves `.yellowHollowCircle` 4
  16. Hi, i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not. Interesting is that when you
  17. When I am running my angular4 application and i start on a specific route, and navigate to any other route, I get this error ERROR TypeError: Cannot read property 'hasAttribute' of null When I search my entire project and all loaded dependencies, one of the files that uses hasAttribute is TweenMax and ScrollMagic. Does that mean my errors has to be somewhere in TweenMax or ScrollMagic. It looks like the app is trying to load or find a dependancy, as the error is piped out in the Webpack Bundle right before GSAP starts. If i start on app.about as my
  18. Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance
  19. Hello, I have created an Animate project where I have used TimelineMax and a few Animate timelines/tween. (the reason for Animate timeline is that I need to utilise mask). From my TimelineMax I would like to call the Animate timelines/tween to start these, rather than have them all fired at once in the beginning. As you will see in the attache code, the yellowBar2_mc is the movieclip that need to be called to start later in the timeline. var tlheadline = new TimelineMax({}); tlheadline.to(this.inspire1_mc, .8, {delay:.1,alpha:1, ease:Sine.easeOut})
  20. I'm trying to have .scene1 slide off the page to the left side of my animation. My goal was to add a property of overflow:hidden to a group named .screen-wrapper. The idea is that once .scene1 slides off the screen it would not be seen beyond the white screen. Sadly this is not working. When checking out the code it seem to be taking the attribute. Is there a way to-do overflow:hidden, or am i doing it wrong? Any help would be great.
  21. Please check the codepen link and could someone please help me to create "Tada" or "Flash" effect instead of "Shake" effect? Thanks in advance.
  22. Hello, I was wondering if anyone could provide me with a snippet on how to use SplitText and mouse events? I have done some snooping around but all, so far, has been fruitless. Here is what I have so far var myHeaderSplit = new SplitText(".text-container h1", { type: "words,chars" }); var headerChars = myHeaderSplit.chars; TweenMax.staggerFrom(headerChars, 0.5, { opacity: 0, rotation: -720, scale: 100, ease: Power1.easeOut }, 0.2); headerChars.onmouseover = function () { TweenMax.to(headerChars, .
  23. I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.
  24. Hello, first time here I'm trying to put together a one-page scroll with a "cube" animation. Basically I would like to see the red cube falling in some very specific divs during the panels navigation (the grey ones), but I fear that I'm using too many libraries. My reference: https://tv.youtube.com/welcome/ My working draft: http://j-a.it/tic/ Any suggestion? Thanks EDIT, uploaded a CodePen.
  25. 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
×