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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests? If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file? At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously) Or is this just a bad idea all round? Emily
  2. 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.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.min.js:14) TweenMax.min.js:1 Uncaught RangeError: Maximum call stack size exceeded at d.k.totalDuration (TweenMax.min.js:1) at d.q.duration (TweenMax.min.js:14) at d.q._remove (TweenMax.min.js:14) at d.h.add.h.insert (TweenMax.min.js:17) 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.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) Presumably related, I can't get the latest stage I'm working on to begin. I guess as a newbie, I've a couple of questions for the more experienced Greensock users out there: Any idea what's going wrong here? Any thoughts on how I could be doing this better? I've cobbled together my current approach from forum answers / stackexchange etc, currently by using one main timeline and adding sub-timelines (via functions) at various label points. I don't need it to stop in as many places as I've added (thats mainly to help me approach it in sections), but I do need it to hold in the 'working' loop until restarted by controls elsewhere. Any help / thoughts greatly appreciated. Thanks!
  3. 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
  4. Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment
  5. Hi there! I am just looking into ways to animate things without using position absolute and left and right properties. with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute? Cheers
  6. 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 seems to be scaling the div/bgimage while scrolling with scrollto. Going horizontal also adds a wrinkle. TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30}}); TweenMax.to("#div" + section, 1, {width:"60vw"}); TweenMax.to("#div" + section + " .subsection1", 0.2, {height:" 30vh", delay:0}); TweenMax.to("#div" + section + " .subsection2", 0.2, {height:" calc(70vh - 3.5vw)", delay:0}); TweenMax.to("#div" + section + " .subsection1 h2", 0.5, {fontSize: "48px",autoRound: true, delay:1}); TweenMax.to("#div" + section + " .subsection1 .portfolio-description", 0.5, {autoAlpha: 1, display:'block', delay:1}); TweenMax.to("#div" + section + " .next-jump", 0.5, {autoAlpha: 0, delay:.1}); Any thoughts for smoothing this out?
  7. 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 first glance the above all works OK, and on the actual site I have the reverse: false; property on scroll magic so it only fires once (i've taken this off the codepen so you don't have to keep reloading the page). PROBLEM When the window is bigger than 1024px the animation fires (desired behaviour) When the window is less than 1024px animation does not fire (desired behaviour) When window is loaded above 1024px, and then the window is resized below 1024px, the animation still fires (not desired behaviour) Now, the normal solution would be to just add an event listener that triggers on a resize event, and pass the name of the function holding the tween into the event listener. However because the trigger is scroll magic, I can't do that because it creates a second instance of the function being called and basically doesn't work. The actual site is now finished and this is the final issue, I just seem to be going around in circles. Does anybody know how I can have it so when the window is resized after loading, the else part of tween takes priority and the tween effectively doesn't animate? P.S. In the future I'll just add an identical section that only shows on mobile, that is hidden on desktop and swap them out, but because this animation is happening on a wordpress site with a large homepage, I'd have to rename so many elements (and their equivalent stylesheet info and JS variables) because I've used the class names that are dynamically generated by the wordpress theme, and adding a new section basically changes the names of them. I can't believe I've got myself into such a ball-ache. As well as the simplified codepen, here is the simplified JS for quick reference function theAnimationTween() { if (window.innerWidth > 1024) { var tl = new TimelineMax(); tl.to("#box", 0.5, {x: 200}); } else { tl.to("#box", 0, {x: 0}); } return tl; } var controller = new ScrollMagic.Controller(); var blockScroll = new ScrollMagic.Scene({ triggerElement: "#box", triggerHook: 0, }) .setTween(theAnimationTween()) .addIndicators() .addTo(controller);
  8. 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!
  9. 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 in the example so i had something to stagger). Any ideas / suggestions welcome. Emily
  10. 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 able to keep this code within the child clip too, so that it becomes a self contained unit which I can reuse in different projects. I have tried several variations and none have worked. It doesn't necessarily throw an error, just no animation occurs. If I put a console.log in the function it sees and responds to that, it's just ignoring the tweens. I am not sure if it is because the child clip does not know what TweenMax is, or if I am targeting the buttons incorrectly, or something else entirely!
  11. 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
  12. 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('.js-logo__inner', 0.1, { fill: 'pink' }); innerEnd.to('.js-logo__inner', 0.1, { fill: 'orange' }); outerStart.to('.js-logo__outer', 0.1, { fill: 'orange' }); outerEnd.to('.js-logo__outer', 0.1, { fill: 'pink' }); const changeLogoStartTrigger = document.querySelectorAll('.js-change-logo--start'); const changeLogoEndTrigger = document.querySelectorAll('.js-change-logo--end'); function changeLogoStart() { changeLogoStartTrigger.forEach((triggerStart) => { const sceneChangeLogoStart = new ScrollMagic.Scene({ triggerElement: triggerStart, reverse: true, triggerHook: 0.065, offset: 0, }) .setTween(innerStart) .setTween(outerStart) .addIndicators() .addTo(controllerMobile); }); }; function changeLogoEnd() { changeLogoEndTrigger.forEach((triggerEnd) => { const sceneChangeLogoEnd = new ScrollMagic.Scene({ triggerElement: triggerEnd, reverse: true, triggerHook: 0.015, offset: 0, }) .setTween(innerEnd) .setTween(outerEnd) .addIndicators() .addTo(controllerMobile); }); }; changeLogoStart(); changeLogoEnd();
  13. 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 a solution to this problem? I'd like to use .from, however I do not want to see it flash quickly on the page before it starts the animation.
  14. 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 in a timeline but am not sure if this is the appropriate thing to do for my kind of animation. var introTimeline = new TimelineMax(); introTimeline.append( TweenMax.to($(".Ele1"), 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); introTimeline.append( TweenMax.to($(".Ele2"), 1.5, {scale: 2, fill: "cyan", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); Can someone here help me? I would really really appreciate it! GSAP looks awesome but I'm quite confused right now …
  15. 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 right away. thanks a lot guys and keep up the awesome work. animation.js import ScrollMagic from 'scrollmagic'; import 'animation.gsap'; import 'debug.addIndicators'; import TweenMax from 'TweenMax'; import 'EasePack'; // eslint-disable-line /* eslint-disable no-unused-vars, no-undef */ /** * ***************************************************************************** * Mobile */ export const controllerMobile = new ScrollMagic.Controller(); /** * Service Tiles Mobile */ export function triggerServiceMobile() { const serviceTileFigure = document.getElementsByClassName( 'js-service-tile__fig', ); for (let i = 0; i < serviceTileFigure.length; i += 1) { const sceneServiceMobile = new ScrollMagic.Scene({ triggerElement: serviceTileFigure[i], reverse: true, triggerHook: 1, offset: 0, duration: 280, }) .on('start', () => { serviceTileFigure[i].classList.add('js-service-tile__fig--is-active'); }) .on('end', () => { serviceTileFigure[i].classList.remove( 'js-service-tile__fig--is-active', ); }) // .addIndicators() .addTo(controllerMobile); } } /** * ***************************************************************************** * Desktop */ export const controllerDesktop = new ScrollMagic.Controller(); /** * Service Desktop */ export const tweenServiceDesktop = TweenMax.fromTo( '.c-service', 1, { autoAlpha: 0, scale: 1, y: 200 }, { ease: Power0.easeIn, autoAlpha: 1, scale: 1, y: 0 }, ); export function triggerServiceDesktop() { // const sections = document.getElementsByTagName('section'); const sceneServiceDesktop = new ScrollMagic.Scene({ triggerElement: '#trigger', reverse: false, triggerHook: 0.75, }) // .addIndicators() .setTween(tweenServiceDesktop) .addTo(controllerDesktop); } /** * Portfolio Desktop */ export const tweenShowcaseDesktop = TweenMax.staggerFromTo( '.c-showcase-item', 0.4, { autoAlpha: 0, scale: 0, y: 0 }, { ease: Power4.easeOut, autoAlpha: 1, scale: 1, y: 0 }, 0.3, ); export function triggerShowcaseDesktop() { const showcaseTiles = document.getElementsByClassName('c-showcase-item'); const sceneShowcaseDesktop = new ScrollMagic.Scene({ triggerElement: '.c-showcase', reverse: false, triggerHook: 0.5, }) // .addIndicators() .setTween(tweenShowcaseDesktop) .addTo(controllerDesktop); } and my entry where i import and trigger them: // Mobile Animationen enquire.register(breakpoint.forPhoneOnly, { match() { import('changeLogoColor') .then((changeLogoColor) => { changeLogoColor.default(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); import('animation') .then((animation) => { animation.triggerServiceMobile(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerMobile.destroy(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, }); // Desktop Animationen enquire.register(breakpoint.forTabletPortraitUp, { match() { import('animation') .then((animation) => { animation.triggerServiceDesktop(); animation.triggerShowcaseDesktop(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerDesktop.destroy(); animation.tweenShowcaseDesktop.kill(); animation.tweenServiceDesktop.kill(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, });
  16. 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 codepen above, here is the JS code for quick reference. var clicked = false; // sets the clicked state var $mainMenuButton = document.getElementsByClassName('desktopmenubutton'); // button to be clicked function newColor(e) { e.currentTarget.style.background = "black"; } function originalColor(e) { e.currentTarget.style.background = "red"; // e.currentTarget.TweenMax.to($mainMenuButton, 1, {background: 'red'}); } // loop through instances of the class and add functions dependent on the click state for (h = 0; h < $mainMenuButton.length; h +=1) { $mainMenuButton[h].addEventListener('click', function(e) { if (clicked === false) { newColor(e); clicked = true; // changed the clicked state } else { originalColor(e); clicked = false; } }); }
  17. 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
  18. 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` 400px immediately on pageload (much faster than the 2 seconds it should be taking). Scrolling up and down yields the console.logs seen in the attached screenshot, and no further movement. Do you understand why `.play(0)` is not playing the tween from the beginning like I expect? const reverb = function(object, amount = 10, time = randomBetween(2, 3), timeMax){ let tweenName = object + 'ReverbTween' + this._reactInternalInstance._debugID, sceneName = object + 'ReverbScene' + this._reactInternalInstance._debugID; if (!this.controller) this.controller = new ScrollMagic.Controller(); if (timeMax) time = randomBetween(time, timeMax); this[tweenName] = TweenMax.to(object, time, { transform: `+=translateY(${amount}px)`, ease: Power3.easeOut, paused: true }); this[sceneName] = new ScrollMagic.Scene({ offset: 0, duration: 1 }) .triggerHook(1) .on('update', e => { let { scrollPos } = e, { lastScrollPos } = this.state; let scrolling = lastScrollPos > scrollPos ? 'up' : 'down'; this.setState({ lastScrollPos: scrollPos, scrolling }); }) .setTween(this[tweenName]) .addTo(this.controller); } // just calls callback once user stops scrolling const scrollStop = function ( callback ) { if ( !callback || Object.prototype.toString.call( callback ) !== '[object Function]' ) return; var isScrolling; window.addEventListener('scroll', function ( event ) { window.clearTimeout( isScrolling ); isScrolling = setTimeout(function() { callback(); }, 66); }, false); }; class SuperFunTime extends React.Component { constructor(props) { super(props); this.reverb = globals.reverb.bind(this); } componentDidMount(){ this.reverb('.yellowHollowCircle', 400, 2); globals.scrollStop(() => { console.log('stopped scrolling ' + this.state.scrolling, this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].progress()); this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].play(0); }) } }
  19. 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 click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx
  20. 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 route, and goto app.contact or app.welcome or app.portfolio I get the hasAttribute error when I leave the about scene. I destroy a scrollmagic scene on leave but i do that in another place on another route and don't get this cryptic error. if i start on ANY other route, and goto about and then off about, i never get that error. So i guess my question is, do you think this is TweenMax related? assuming that error is thrown? or could there be a possibility that its something with webpack packing tweenmax, or maybe something else not necessarily TweenMax. I tried to clear the component in that route out to be 100% blank, and it still happens. The only time it doesnt happen is if i obviously start from another route, or I remove tweenmax and scrollmagic from my app, and then it works again.. i kinda feel this question will be hard to answer without someone just looking at the source 100%, so im not expecting much but just wondering if anything clicks for anyone?
  21. 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
  22. 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}) tlheadline.to(this.inspire1_mc, 4.5, {delay:-.9,x:"+=100",ease:Power2.easeOut}) tlheadline.to(this.yellowBar1_mc, 4.5, {delay:-4.5,x:"+=100", ease:Power2.easeOut}) tlheadline.to(this.inspire1_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.yellowBar1_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.engage_mc, .8, {delay:.1,alpha:1, ease:Sine.easeOut}) tlheadline.to(this.engage_mc, 4.5, {delay:-.9,x:"+=100",ease:Power2.easeOut}) tlheadline.to(this.yellowBar2_mc, 4.5, {delay:-4.5,x:"+=100", ease:Power2.easeOut}) tlheadline.to(this.engage_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) tlheadline.to(this.yellowBar2_mc, .4, {delay:-2.3,alpha:0,ease:Sine.easeOut}) Hopefully this is a simple solution. Thanks in advance. Animate.zip
  23. Hello, Simply trying to have my "clouds" (the red boxes that say cloud) to repeat. Currently, they are repeating, but the animation doesn't end (the cloud doesn't make it to the other side of the screen) There are about 5 different clouds on the page and I want them all to move at varying speeds, and then loop once they can no longer be seen on the page. Any help greatly appreciated. Cheers!
  24. 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.
  25. 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, .2, { css: { opacity: 0 } }); } any help greatly appreciated