Shaun Gorneau last won the day on April 26

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Content count

    365
  • Joined

  • Last visited

  • Days Won

    10

Shaun Gorneau last won the day on April 26

Shaun Gorneau had the most liked content!

Community Reputation

798 Leader

1 Follower

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Hartford, CT

Recent Profile Visitors

4,238 profile views
  1. Run timelineMax on click

    There are a few ways you can do this ... one simple way is to set a global boolean, modify it within the click handler, and then modify it within the timeline's onComplete callback.
  2. Why does my bike break in some browsers? Rotation? and transformOrigin?

    This fixes it in Safari, but of course breaks it everywhere else. But I really don't know why Safari is treating it so differently. @PointC is the SVG master ... so maybe he'll know
  3. Why does my bike break in some browsers? Rotation? and transformOrigin?

    Yeah, tested in MacOS 10.13.4 with Safari 11.1, Chrome 66, Firefox 59, Opera 52, and iOS 11.3 Safari ... issue shows up in Safari (MacOS and iOS) and nowhere else.
  4. Stop looping animation and make it disappear

    Awesome, glad to help! Welcome to GSAP and happy tweening
  5. Stop looping animation and make it disappear

    One option (depending on how rigid the requirements are) would be to tween the alpha of the .raindrops parent elements to 0 and then kill the .raindrops timelines.
  6. How to update a Tween on window resizing

    Hi @alexandrebuffet and welcome to GSAP! One method I've used in the past is to capture the timeline's progress, rebuild the timeline's tweens, and then set the timeline progress() back to where it was. Essentially I use a window resize debouncer to call a rebuild of the timeline after the resize is completed. The rebuild uses any new element dimensions to calculate tween parameter values and then send the timeline right back to the last recorded progress() value. I've simplified your scroller to just use mousewheel deltas (vertical and horizontal) to modify the timeline's progress to allow for the horizontal scroll (to remove the complexities of ScrollMagic in this example) to focus on what I'm saying. Resizing should demonstrate what you're after. The code isn't perfect ... I don't have time this morning to dig to deep ... but it should be a starting point for you.
  7. check if element has class in timelinemax

    Hi @mary92, `$(this).hasClass("hotspot-left")` will return true or false, not an element. If you want to add to the timeline conditionally, you can wrap that tween in an if statement. $(".hotspot").hover(over, out); TweenMax.set(".popup", { autoAlpha: 0 } ); function over(){ var overTl = new TimelineMax(); if( $(this).hasClass("hotspot-left") ){ overTl.to( $(this) , 0.5 , { x: -20, ease: Power2.easeIn } ) } if( $(this).hasClass("hotspot-right") ){ overTl.to( $(this) , 0.5, { x: 20, ease: Power2.easeIn } ) } overTl .to($(this).find(".icon .group"), 0.3, { fill: "#fff", ease: Power3.easeIn } ) .to($(this).find(".popup"), 0.3, { autoAlpha: 1, ease: Power4.easeIn } ) .fromTo($(this).find(".copy"), 0.3, { y: -20, autoAlpha: 0 }, { y: 0, autoAlpha: 1 } ) } Hope this helps!
  8. how to apply repeat to "staggerTo"

    Hi @JMgreen, welcome to GreenSock You are very close ... `repeat` can be set just like `y` and `rotation` inside the vars object of the tween, in the vars object of the timeline (which will produce a different result), or with the repeat method on the timeline (which will produce the same result as the vars object of the timeline). Here are demonstrations of those options. *Note TimelineLite doesn't accept the repeat parameter ... so I used TimelineMax for that. Stagger does accept the repeat parameter, so we could place it directly on the tween within a TimelineLite. Happy Tweening!
  9. Animating Native HTML5 Progress Bar

    You're very welcome, @ryanf! Glad to help
  10. Animating Native HTML5 Progress Bar

    Ah, ok. Here is simple pen showing how to tie the progress value of a timeline to the value of an HTML5 progress element.
  11. Animating Native HTML5 Progress Bar

    Hi @ryanf value:( tl1.progress()*100 ) // <- this equals 0 at the start ... so tween to 0 will do nothing In your tl1 your tweening to the value of 0 by passing the tweens .progress() as the value (which hasn't yet moved). Not sure what your trying to achieve exactly, but if you want a progress to animate up to some predetermined value ( based on the value attribute perhaps) you can tween "from" 0 up to that set value.
  12. I've made it to 2,000 posts!!

    Way to go @PointC!!
  13. Scrollmagic parallax + sidebar navigation

    False alarm!! Caches were a foolin' me! It appeared Chrome 66 wasn't loading some elements on pages (other browsers were) ... I got a bit heated rather than taking a step back and thinking about the obvious: wifi going nuts but caches doing their work. All good here! ( other than the stutter I still see in my Pen above with Chrome )
  14. Scrollmagic parallax + sidebar navigation

    I'm now noticing a lot of *other* issues with past and current projects in Chrome 66 What did they do?!?