Shaun Gorneau last won the day on March 3

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Content Count

    590
  • Joined

  • Last visited

  • Days Won

    21

Shaun Gorneau last won the day on March 3

Shaun Gorneau had the most liked content!

Community Reputation

1,370 Superhero

6 Followers

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Hartford, CT

Recent Profile Visitors

5,053 profile views
  1. Shaun Gorneau

    Infinite news text

    Hi @DevSaver, we've been dealing wit he same type of question over here ... I think it would help you.
  2. Shaun Gorneau

    Appending Sequences from Conditional Statements to the Timeline Object

    headlines_tl.progress(1,false) will certainly push the playhead to the end of the tween while supressing events ... is that what you're looking to do? To pause the Timeline, you can always use headlines_tl.progress.pause() ... but I'm not sure if you want to jump to the end, or pause it 🤔 What is your overall goal?
  3. Shaun Gorneau

    Continuous news ticker

    Hi @Bencius, You can certainly update the ticker content anytime and fire of the clone, position, duration logic for new content. But to have it update without noticing entirely depends on where the content is updated. If it's within the first visible portion of ticker, that would switch quickly at the start of the Tween and be noticed. If the affected text is outside of the visible area, then it would go unnoticed. If you are going to be dealing with dynamic content, I would look at creating content containers adhoc, appending them to a timeline, and calculating their duration based on their width. And "looping" would mean circling around and appending the same content again ... not repeating the tween. It would be one long ever changing timeline full of dynamic tweens. Hope this helps.
  4. Shaun Gorneau

    Issue with GSAP Custom Cursor - I can't work out why it breaks.

    This is a safe place, @emilychews! Happens to all of us! Just a few days ago, I sat and stared at the following wondering why it wasn't working ... for too long. document.ready( function(){ //stuff }); I get it 😉
  5. Shaun Gorneau

    Continuous news ticker

    You certainly can "blur" the text using either some layering of text-shadow .. or css filter blur(). But these don't really achieve what you're looking for which is motion blur. I'm not sure there is much to do but play with the speed variable to get something that produces more or less of what you're looking for. FWIW ... Chrome is buttery smooth, Safari is not too far off of smooth, but there is a little flicker to the text ... and Firefox it a bit jumpy with text positioning. So, each browser will present its own issues.
  6. That's exactly the reason to have it in a CodePen ... not working
  7. There's a lot going here ... please make a barebones demonstration of the problem in CodePen. Also, by the looks of things like fadeOutTl .to($intro, 0, {className:'-=fadeOutAnim'}) .to($intro, 0.1,{className: '+=fadeInAnim'}) .restart(); You're using GSAP to simply swap classes, which I assume means you're using CSS transitions for the tweens. You really should pick one ... CSS transitions ... or GSAP.
  8. Shaun Gorneau

    Issue with GSAP Custom Cursor - I can't work out why it breaks.

    It was just a missing "}" at the end of the growOnHover() function. Have a look here, (and also look at the note at line 42)
  9. Shaun Gorneau

    Appending Sequences from Conditional Statements to the Timeline Object

    Happy to help! Good luck with the project!
  10. Shaun Gorneau

    Appending Sequences from Conditional Statements to the Timeline Object

    No too complex at all ... just an additional .set() and .to()! That's it Have a look at lines 38 and 39 40 and 41. One note, I also added a 1 second delay to the timeline itself for a softer intro (line 5). Edit: I added a class of "hide" to <div id="headlines"> ... and then a function to the timeline to remove that class (line 31) to stop the flash of all on then all off. And lines 42-44 to keep the last headline on screen (no tweening to autoAlpha 0)
  11. Shaun Gorneau

    Appending Sequences from Conditional Statements to the Timeline Object

    Well then ... happy I could help! Feel free to fire away with any questions as I modified the code quite a bit.
  12. Shaun Gorneau

    Continuous news ticker

    You're welcome @Bencius. I hope you see why the first method caused the snapback and the second method is more precise.
  13. Shaun Gorneau

    Appending Sequences from Conditional Statements to the Timeline Object

    I'll be honest .. there is A LOT going on in that CodePen and it's tough to really get a sense of what you want. But, in basic logical terms ... it sounds like you want an array like this myString = ["Jest", "Crest", "Test", "", "Rest", "", "", "Best", "", "", "", "Fest"]; To be iterated over, where each value is worth 2 ... and if an empty string is encountered, its value of 2 is added to the first backward-looking non-empty string. Such that you could end up with these two arrays for strings and timing, /// After being processed myString = ["Jest", "Crest", "Test", "Rest", "Best", "Fest"]; myTiming = [2, 2, 4, 6, 8, 2]; Here is how I would do it
  14. Shaun Gorneau

    Slider with perspective cube turning on its head

    I can pick this apart a little later .. but one thing I see off the bat is that the logic (somewhere) is doubling the faces. If you have 3, it takes 6 clicks to get around to the start ... 4 faces takes 8 clicks ... etc. That is why your seeing the backfaces of the others (that and CSS backface-visibility).
  15. Shaun Gorneau

    Continuous news ticker

    Hi @Bencius, Yeah, the problem here is that the tween is always moving "-=50" and can overshoot that amount before resetting. The reason for the constant "-=50" is because of the need for a "constant speed" regardless of the length of the text. We can tackle that another way with some math by defining a "speed" and letting the math determine the duration of the tween. That means we can move the ticker a predefined total amount (the width of the span) in a single tween before restarting.