Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Shaun Gorneau last won the day on March 3 2019

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Shaun Gorneau

  1. 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.
  2. That's exactly the reason to have it in a CodePen ... not working
  3. 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.
  4. 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)
  5. 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)
  6. Well then ... happy I could help! Feel free to fire away with any questions as I modified the code quite a bit.
  7. You're welcome @Bencius. I hope you see why the first method caused the snapback and the second method is more precise.
  8. 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
  9. 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).
  10. 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.
  11. @Maryna, one way to handle that would be to define newTl in a scope accessible to all functions, kill() newTl on hover-out mouseleave, and build/rebuild the tween on each circleMove() call.
  12. Doesn't appear to be ... but GSAP is certainly capable of handling the tweened aspects of that site.
  13. Hi @Bencius, Without a Codepen showing your code, it is hard to know what is going wrong. But, here is a quick Pen I put together that may help.
  14. You can figure out where each hand should be by getting the local time components and translating those to degrees. For the hour ... get the hour (in 12 hour format) + subhour (current-min/60) ... so, 17:30 would translate to 5:30 ... which translates to 5.5. Take that number and multiple it by 30 (30° per hour) ... which would move the hour hand to starting point of 165°. Similar logic for minute and second. You could use a TweenMax.set() to move these each to their initial position before your full rotation tweens. Good luck with the project!
  15. @Exhumator, Modifiers looks at the vars property values on every tick and updates them based on the conditions you set. That would make the box jump all over the place at every frame! What you want is to update the tween with new values after the current tween is done. Have a look here. EDIT: I still had .invalidate().play(0) ?‍♂️ ... was working around a few things and didn't mean to leave that in!! .invalidate() is enough
  16. That has to do with the drag event. If you put draggable="false" on each image, it will prevent that from interrupting the mouseup event. Every browser and version I can think of supports draggable. But, for the rare case one does not, as a fallback, add the `dragend` event listener to do that same as `mouseup`.
  17. In the case of the example you gave ... you would need each image in parent that has overflow: hidden ...
  18. Hi @Caspert, What you're looking for in that case are mousedown and mouseup events.
  19. Hi @jessegavin, I know this is an older thread, but I just happen to be checking up on the Jobs & Freelance forum. I'm compiling a bit of data on the why and what of hiring & contracting in our world of web dev. So, that leads to my question ... in the case of Screenfeed, what is/was the driving factor in requiring the position to be onsite (or very close to)? Thanks!
  20. Hi @TEQQED, So, there are a few things happening here ... and depending on what effect you want to pull off, it can go from fairly straight forward to moderately complex. Having DOM elements rotate a bit on the x/y axis in response to mouse movement and having text fade away as the user scrolls can be achieved with just a little code. Having an image respond to mouse movement at varying levels depending on "depth" can be beautiful, but requires quite a bit of work .. both from a code standpoint and from an "image prep" standpoint. Here is a great tutorial on that ... https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/ Example: https://tympanus.net/Tutorials/Fake3DEffect/index2.html
  21. Happy to help, @Emilek1337 !
  22. hi @Emilek1337, Here is a fork of your pen showing how to tween text outside of a div, but let the div mask anything outside. I've made a few notes within the pen to show you what I changed. Hope this helps!
  23. Glad to help and save you some time ? Happy tweening!