Jump to content
Search Community

Search the Community

Showing results for tags 'nesting'.

  • 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

Found 9 results

  1. I built a site using ScrollSmoother, only to find out that ScrollSmoother doesn't really work as soon as anything complex is required. I have now run out of time to troubleshoot this any further as the site is already overdue, so I am trying to remove ScrollSmoother and revert back to a ScrollTrigger-only implementation. Unfortunately, removing ScrollSmoother causes other weird problems, and it's doing my head in. I've used GSAP for years and never really had any issues. Am I losing my mind, or is something stupid going on here? Note: This is a copy of the below with ScrollSmoother and its wrapper elements removed. Apologies for the inconsistent JavaScript, I started writing the codepen specifically and then just copied bits in from the site I'm working on with the quickest modifications to make it work in the codepen and haven't bothered making it neat, so it's all over the place. *Edit: Apparently all Codepens just go to the bottom of the post no matter where I put their links* Here is an example (copied from the above) without pinType: 'transform'and another example (also copied from the above) using pinType: 'transform' pins, along with the original ScrollSmoother example (which can't scroll to the bottom): https://codepen.io/nedmartin/pen/KKRQYLq https://codepen.io/nedmartin/pen/MWGVvga https://codepen.io/nedmartin/pen/zYjWdvZ
  2. Hi there! Just working on something for a calming app. I want the user to be able to choose how many breaths they'd like to take, then be walked through an animation that symbolizes each breath. After the animation is finished it should fade off the screen and go back to the section where they can choose how many breaths they'd like to take, starting the page over again essentially. The button that the user clicks is the value that my breatheAnimation will use to repeat. Right now I'm running each timeline separately when the button is clicked, leaving me to need a 4 second delay on my breatheAnimation (not ideal). I was previously attempting to do some kind of onComplete(), isActive stuff, buuut I didn't really know how to go about it with each timeline. Nesting the animations in functions also proved tricky as I wasn't able to use my updated breatheSelect value, it only took the 0 that the breatheSelect value is upon page load. Right now I have the animationRestart timeline commented out as it will simply run as soon as the button is clicked, even when it does run I can't actually start all of the animations again by clicking one of my options. I'm assuming this means I need to reset my timelines back to paused, but I'm not really sure. Thankful for the help in advance! Hope I've provided enough details.
  3. Hi, I´m new to this but i love it so far....except for this problem. I made several timelines for my animations, but i can´t get them to loop/repeat. One works fine, but ill guess I´ll have to nest them some way? Or have I got it all wrong?? var t1 = new TimelineMax(); t1.to(txt1_1, 0.5, {opacity:1, ease: Power2.easeOut}).to(txt1_1, 11, {opacity:1}).to(txt1_1, 0.5, {opacity:0, left: -300}); var t2 = new TimelineMax(); t2.to(txt1_2, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_2, 2, {opacity:1}).to(txt1_2, 0.5, {opacity:0, top:30}); var t3 = new TimelineMax(); t3.to(txt1_3, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:3}).to(txt1_3, 2, {opacity:1}).to(txt1_3, 0.5, {opacity:0, top:30}); var t4 = new TimelineMax(); t4.to(txt1_4, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:6}).to(txt1_4, 2, {opacity:1}).to(txt1_4, 0.5, {opacity:0, top:30}); var t5 = new TimelineMax(); t5.to(txt1_5, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:9}).to(txt1_5, 2, {opacity:1}).to(txt1_5, 0.5, {opacity:0, left: -300}) ; var tlp1 = new TimelineMax(); tlp1.to(panel1, 0.5, {opacity:1, ease: Power2.easeIn, left:0, delay:12}).to(panel1, 5, {opacity:1}).to(panel1, 0.5, {opacity:0}); var tlp2 = new TimelineMax(); tlp2.to(panel2, 0.5, {opacity:1, left: 680, ease: Back.easeOut.config(1.2), delay:11.5}).to(panel2, 5.5, {opacity:1}).to(panel2, 0.5, {opacity:0});
  4. I'm having trouble sequencing multiple timelines. I don't want the the second timeline (NUM6Timeline) to be visible till layer 1 has complete. I need to do this on 6 timelines but have just included 2 timelines in this codepen. ideally I would also like to fade out timeline1 before the next happens. When I try with 6 I get in a right mess and not having much luck with 2 either.. any help would be much appreciated. I've noticed i also lose the the ease on the second timeline (NUM6Time) so the animation loses its gradual build up regards, Ryan
  5. I'm trying to have a timeline be part of multiple timelines in greensock. I guess the what I need to happen is one element needs to animate in both cases but only on or the other needs to animate in each case. Check out the codepen to see what I mean Thanks in advance
  6. Hi, as you can see in the Codepen example, I'm seeing different behaviors when using fromTo() nested in two timelines. First case (work as expected): var t1 = new TimelineMax({paused: true, repeat: 2}); t1 .to("#redBox", 1.5, {x: 300}) .fromTo("#redBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}, "+=0.5"); Second case (work as expected only once, then from the second iteration it seems to not reset the "from", ignoring "immediateRender = false" config value). var t2 = new TimelineMax({paused: true, repeat: 2}); t2 .to("#blueBox", 1.5, {x: 300}) .add(new TimelineMax().fromTo("#blueBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}), "+=0.5"); Is there something wrong in my setup or is it a bug? Thanks in advance.
  7. Hello, I've been fiddling with the greensock platform and plugins for a while and I'm impressed! Both - with the capabilities and the performance. I'm building a prototype of a fullscreen 2-way scroll system. A full window master - that scrolls and snaps horizontally. And with vertically scrolling elements inside. The goal is to get native scrolling full pages swipable up'n'down and side-to-side with snapping. Here's what i need help with: http://codepen.io/skorpa/pen/mvDfz Worked so far as intended - The vertical scroll cancels the parent horizontal scroll on onDragStart by passing endDrag to it, and vice versa, but only works with a mouse. With touch devices you can only control horizontal scroll. disable & enable doesent handle with touch eather and can leave elements frozen offset mid animation. Is there a way to implement this? Compromise is to use non native x, y scrolling and use keyboard or clickable buttons to move left-right I'm guessing.. And on a side note: Any good ideas how to implement horizontal snapping with native mouse / trackpad scrolling? Thinking - animate to the nearest snap point after a scroll event is fired Thanks in advance! Mikk
  8. Hi, I am working on a flash training presentation including a number tweens which need to appear one after another, mainly texts and some photos flying in or fading out while trying to control the timing of the elements with delay property. I have noticed however that when "delay" used in conjunction with "onComplete" callbacks the delays are somewhat missing and not processed. So instead of delaying the start of the animation and then only do onComplete when it ends it seems like the script is disregarding the delay properties an proceeds immedeately with onComplete callback functions. Please see example below: //animations part 1 TweenLite.to(girl, 1, {_alpha:100, ease:Linear.easeNone, delay:1.5}); TweenLite.to(planTab, 0.7, {_y:417, ease:Linear.easeNone, delay:3.5}); TweenLite.to(text_1, 0.5, {_x:394, _alpha:100, ease:Linear.easeOut, delay:4}); TweenLite.to(text_2_Anim, 0.5, {_x:395, _alpha:100, ease:Linear.easeOut, onComplete:myFunction1, delay:4.3}); //animations part 2 - need to start with about 2 second delay after previous set so the previous texts can be read function myFunction1() { TweenLite.to(text_2_Anim, 0.5, {_x:435, _alpha:0, ease:Linear.easeOut, delay:2.5, onComplete:text_2_Anim.nextFrame()}); TweenLite.to(text_2_Anim, 0.5, {_x:395, _alpha:100, ease:Linear.easeOut, delay:3}); TweenLite.to(benefitsTab, 0.5, {_alpha:100, ease:Linear.easeNone, onComplete:myFunction2, delay:3}); } //animations part 3 function myFunction2() { //more tweens here. } Any ideas on why it is happening? Thanks, Attila
  9. From the TimelineMax FAQ I understand that Timelines can only appear in one parent Timeline at a time. I'm just curious what the reason for this is. In my current project It has the unfortunate consequence that any Timeline that uses a "shared" child Timeline will have to be cleared and remade every time it's played. Which is not a huge deal, I'm just curious more than anything. Thanks!
×
×
  • Create New...