Shaun Gorneau last won the day on November 29

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Content Count

    454
  • Joined

  • Last visited

  • Days Won

    13

Shaun Gorneau last won the day on November 29

Shaun Gorneau had the most liked content!

Community Reputation

1,080 Superhero

3 Followers

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Hartford, CT

Recent Profile Visitors

4,739 profile views
  1. Shaun Gorneau

    Select Individual Shapes in an SVG Randomly when Tweening

    @emilychews One method would be to get all dots (by classname) into an array and generate a random number between 0 and the length of that array minus 1 (for the indexes available in that array) and tween the element randomly addressed. Here is a CodePen illustrating that. (note though that the Pen doesn't look to see if the random integer is different than the previous random integer ... which means the same dot could tween multiple times in a row) Hope this helps! Shaun
  2. Shaun Gorneau

    Get a timeline with Javascript

    Hi @Robert May, That's because Javascript doesn't accept variable variable names the way other languages do. For example, in PHP you can do the following $foo = 'bar'; $$foo = 'baz'; echo $bar; // output would be 'baz' echo ${$foo}; // output would also be 'baz' In Javascript, variables are stored as properties of the window object. So the following illustrates how to use variable variable names in Javascript var tl0 = new TimelineMax({paused: true}); var tl1 = new TimelineMax({paused: true}); var tl2 = new TimelineMax({paused: true}); var tl3 = new TimelineMax({paused: true}); for( var i=0; i<4; i++ ){ console.log( window['tl'+i] ); // outputs the timeline objects } I assume in your example ... console.log(currentTimeline + "Tl") var tempTimeline = document.getElementById(currentTimeline + "Tl") tempTimeline.pause(); ... that `currentTimeline` simply refers to a string ... so console.log will simply concatenate and output what you expect, but that doesn't refer to any timeline. The way you are trying to reference the timeline is through an element selector, which won't work (that's looking for a DOM element). Timeline's are Javascript objects. So, as in the previous examples, the way to reference a Timeline is by its assigned variable name. Here is a codepen illustrating variable variables in Javascript and how to reference a timeline. Hope it helps!
  3. Shaun Gorneau

    Get a timeline with Javascript

    @Robert May Timelines are objects that can be stored in a variable for reference. Example var tl1 = new TimelineMax(); var tl2 = new TimelineMax(); var tl3 = new TimelineMax(); Hope this helps!
  4. Shaun Gorneau

    Trigger animation inside a scroll position based timeline

    @peippo Glad to help!
  5. Shaun Gorneau

    Super simple GSAP tied to scroll.

    @jesper.landberg Here is a thread that gets into some of this and may be a good starting place for you Happy tweening!
  6. Shaun Gorneau

    Trigger animation inside a scroll position based timeline

    Hi @peippo, I think what you're looking to do is trigger a separate timeline at the point in which your scroll-controlled timeline reaches a defined position/progress value. You can do so by breaking your "one-offs" into their own paused timelines and then .call() each wherever you like in the scroll-controlled timeline. Check out the CodePen below to see an example of that starting at line 60. Hope this helps!
  7. Shaun Gorneau

    TweenMax is blocking Jquery

    Reducing the progress value to 3 decimal places ... in Chrome, Safari, and Firefox I don't see too much jumping around (minimal and infrequent ... which is par for the course as far as any of my experience with parallax). 2. I'm not seeing this ... but I do see browser inconsistencies with the way this attribute is tweened. Firefox tween smoothly between the values ... Safari seems to tween in whole integer steps, and Chrome seems to not tween the value at all. 3 + 4. I think this has to do the browser you're viewing this in and the fact that the values are small (0 to 3 then 0) and it is simply jumping quickly to the values (without tweening between the values). 😕 I tweened from 0 to 40 to 0 just to get something visual happening for my tests (in item 2) I wish I had a better answer Hopefully someone else does
  8. Shaun Gorneau

    TweenMax is blocking Jquery

    @selfishound When it comes to animation/tweens/motion ... I would choose GSAP exclusively (I know, surprise there 🤣). What I mean is ... choose one, not two. Also, you're affecting the same property on the same element, which is why it will jump around. So ... I think it would be best to apply one tween to #logo, and the other (parallax) tween to a parent wrapper. That should give you better control. Here is a CodePen illustrating what I'm getting at.
  9. Shaun Gorneau

    Problems with reverse and repeat

    Without seeing the code driving this, it's pretty tough to diagnose. I would recommend putting this in a CodePen (as simplified as possible while illustrating the issue). Perhaps one thing you want to look at instead of reversing the timelines is "yoyo". https://greensock.com/docs/TweenMax/yoyo
  10. Shaun Gorneau

    Timelinemax and run duration for acceptance tests

    Glad to help!
  11. Shaun Gorneau

    Timelinemax and run duration for acceptance tests

    Hi @teejay_hh, You can the .progress() method to make the timeline jump to any point in the timeline's progress (0 being the start, 1 being the end, .5 being the halfway point). Hope this helps!
  12. Shaun Gorneau

    Timeline within Master Timeline Start 1 second earlier

    Where you are using add() to inject the tween/timeline and set a label ... try creating labels with their own add() and using the position parameter to offset which ever tween/timeline you like. Here is a code pen illustrating that, Hope this helps!
  13. Shaun Gorneau

    c.call is not a function

    Line 261 is the problem ... tl.staggerTo(gearArray, 0.5, {fill: "rgb(255,255,255)", scale: 1}, 0.25, "-=0.75", "GearGreyscale"); You're passing "GearGreyscale" as the onCompleteAll parameter but there is no function GearGreyscale() That's not failing in the subsequent calls ... example tl.to([gearOne, gearTwo], 0.5, {alpha: 0.5}, "-=1", "GearGreyscale") because .to() has no parameters after `position`. Hope this helps!
  14. Shaun Gorneau

    Smooth Parallax Effect?

    Hi @redfawx! This effect looks like a pretty simple combination of (perhaps) varied tween durations, easing, and (perhaps) tween distances. I say perhaps because those would depend on the desired effect. Here is a simple CodePen to illustrate
  15. Shaun Gorneau

    Option to use custom tag name in SplitText plugin

    I REALLY like the idea of a custom tag option 👍