Shaun Gorneau last won the day on August 22

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Content Count

    440
  • Joined

  • Last visited

  • Days Won

    12

Shaun Gorneau last won the day on August 22

Shaun Gorneau had the most liked content!

Community Reputation

1,025 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,685 profile views
  1. Shaun Gorneau

    Option to use custom tag name in SplitText plugin

    I REALLY like the idea of a custom tag option 👍
  2. Shaun Gorneau

    Separate easing for opacity?

    Glad to help! Happy tweening
  3. Shaun Gorneau

    Separate easing for opacity?

    From your code, I don't know what you're after. Please create a Code Pen to isolate your issue and I can help you further. At a quick glance (and with some assumptions), I would think you're looking for const timeline = new TimelineMax() timeline .from(el, 0.850, { opacity: 0, // Only opacity here with the following ease ease:Elastic.easeOut, onComplete: () => { done() }, 'someLabel' // Create the label for the Timeline position and set position }) .from(el, 0.850, { y: 50, // // Only y here with the following ease ease: SOME-OTHER-EASE, onComplete: () => { done() }, 'someLabel' // Set position (to label created above) }) .staggerFrom(this.$refs['fullscreen-nav-menu-item'], 1, { y: 50, opacity: 0, ease:Elastic.easeOut, }, 0.05, "-=0.8")
  4. Shaun Gorneau

    Separate easing for opacity?

    You could tween each separately and place them at the same timeline position
  5. Only a few minutes to chime in here ... but you could get the progress() at each label, determine if the difference between the two is greater than .5 also have a look at getLabelTime() (I think :/) If so, set the tween to reverse() to the start and then reverse to the destination label using tweenTo().
  6. Shaun Gorneau

    media query resize

    Happy to help!
  7. Shaun Gorneau

    media query resize

    Hi @zozo, the reason for this trouble is a clash between what is being set in CSS and what is being overridden (due to specificity). In the CSS you have .disk{ transform: translate(-50%, -50%) } Which of course is perfectly valid. But what happens when this is run ... tl.fromTo(".disk", 2, {rotation:0}, {rotation:360, ease:Linear.easeNone}); is that the transform matrix is taken over. So, to keep -50% and -50% in the calculations, you can just set those as properties in the fromTo and let the mediaQuery handle it from there, like so Hope this helps!
  8. Hi @kbeats, because we need each block to be controlled by its own timeline, we can't keep recreating var tl = new TimlineMax()... Because we'll just keep overwriting the `tl` ... potentially reversing the wrong timeline. So, we need dynamic variable names to hold the timelines. In PHP, we can do cool things like <? $something = 'foo'; $$something = 'bar'; print $foo; // -> bar // we can also do $i = 1; ${'something_'.$i} = 'Green'; $i++; ${'something_'.$i} = 'Sock'; print $something_1.$something_2; // -> GreenSock In Javascript, we're not so fortunate with the variable variables. But, in the global scope, when assigning var a = 1; we can get to the value of `a` with any of the following ... console.log( a ); console.log( window.a ); console.log( window['a'] ); So, seeing as `a` is a property of the window object (in the global scope), we see how variables can be declared that way too. Dot syntax doesn't help construct a variable variable because we can't use an expression for the property ( e.g. this.'something'+i just doesn't work ) But arrays allow strings as key values ... so we can use an expression there ( e.g. this['something_'+i] ). Soooooo, var tl = new TimelineMax(); Is the same as stating window.['tl'] = new TimelineMax(); which means var i = 0; window.['tl_'+i] = new TimelineMax(); i++; window.['tl_'+i] = new TimelineMax(); is perfectly valid for creating dynamic variable names .. and we now have tl_1; // a TimlineMax object tl_2; // another TimelineMax object and, in terms of if (!window[id]) { ... I'm just checking to see if it's been defined. If not, create the Timeline and control it. If yes, don't recreate the timeline, just control it. Hope this helps! EDIT *** After rereading ... I don't want to ignore what would be done within a function (i.e. not in the global scope) If we do the following .. var a = 1; function something(){ var a = 2; console.log( a ); } something(); console.log( a ); The console would show 2 1 because when something() is called, it in itself has a console.log which references the `a` in the local scope, outputting 2 ... and then the other console.log is called after that referencing the `a` in the global scope, outputting 1. But, we can create variable variables within the function just like I did above by declaring in the window object to then be addressable directly in the global scope or anywhere as a property of window. But if we just need variable variables within the scope of a function, we can also do function something(){ var i = 0; this['tl_'+i] = new TimelineMax(); i++; this['tl_'+i] = new TimelineMax(); // creating variables `tl_0` and `tl_1` within the scope of the function }
  9. Hi @kbeats, the issue I see is that you are appending to the same timeline and playing/reversing that timeline. That's why they get added together. Give this a try,
  10. Shaun Gorneau

    Safari - Half Image clips?

    Hi @cjstage, This is specifically due to rotating on an axis ... and I believe is an accurate representation of what is happening. Imagine you have two shapes each containing points [1, 1] and [-1,-1] (i.e. they are on the same plane). If one were to rotate on the X or Y axis, an edge of that would come forward on the Z axis while the opposite edge would go deeper into the Z axis, appearing behind the other shape. But ... if you moved the one rotating back enough on the Z axis (or the other forward enough on the Z axis) ... it wouldn't cross in front of the other's Z position (0).
  11. Will absolutely do it! And I see you meant "truly" one line! I thought you meant one chained event I included a yoyo only because I caught a glimpse of it in your original code. With or without, you certainly answered your own question! Nicely done! Here is a pen using your method
  12. Hi @Jimmi Heiserman There are many ways to skin a cat! Using a single, chained statement ... you could execute delays by either using the position parameter, the delay property, or by tweening to an already set value for the duration = to the desired delay. Here is a CodePen illustrating. Hope it helps!
  13. Shaun Gorneau

    Scrollmagic parallax + sidebar navigation

    Nope, not at all One of my major takeaways here is that ScrollMagic (many times) is not necessary, and that is certainly the case with the CodePen in this thread.
  14. Shaun Gorneau

    Stop Greensock animation on second page refresh

    “Is there any other way to tackle this using frontend side ie, writing javascript?” Hi Pradeep, the two second options (cookie and local storage) are JavaScript solutions. Do you mean solutions other than those two?
  15. Shaun Gorneau

    Stop Greensock animation on second page refresh

    Hi @Pradeep KS, You'll need to set a hook somewhere on the client side to check against. There are a few ways to do that. If you are using server side code for anything, you could set a session variable on the first load, and then use the presence of that session variable to set a hook on the client side, for example ... <? $class = ''; if( $_SESSION['subsequent_visit'] ){ $class = ' subsequent-visit'; } ?> <body class="some-class another-class <? print $class;?>"> Which you can then check for before you create the timeline. Example if( document.querySelector('body.subsequent-visit').length < 1 ){ const tl = new timelineMax(); ... } Or, on the client side alone, you could set a cookie to check against, or a variable in local storage to check against. Hope this helps, Shaun