Jump to content

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

Shaun Gorneau last won the day on September 29 2020

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Content Count

  • Joined

  • Last visited

  • Days Won


Shaun Gorneau last won the day on September 29 2020

Shaun Gorneau had the most liked content!

Community Reputation

1,836 Superhero


About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
  • Location
    Hartford, CT

Recent Profile Visitors

6,971 profile views
  1. Hi @momciloo, I think, perhaps, you would be better off with a timeline in this case rather than competing tweens. https://codepen.io/sgorneau/pen/abZgrRR?editors=1010
  2. Hi @PG1, You could use onUpdate to check the tween's progress and apply the front class where needed. https://codepen.io/sgorneau/pen/xxOBjRz Hope this helps!
  3. Good lord ... Monday fog brain here ... I was chaining simple tweens as if I was working with a timeline. 😕
  4. Oh geeze .. yeah, I was chaining some calls and forgot that last semicolon. Doh! 🤦‍♂️
  5. The problem (as it appears to me) is that you are calling stagger on each individual '.box' ( within the forEach ) rather than on any array of matches.
  6. Hi @dhaliwallambi, There's a few things you can do, and here is one of them. Use JS (in this case jQuery since you're already using it) to wrap the element in a container. Along with that, you'll want to do a few other things, namely these: Remove the function callParallax(e) Because it's not really doing anything you can't pass directly to parallaxIt(e, target, movement) Furthermore, you can remove the argument `target` and just use the target property of the event function parallaxIt(e, movement){ var $this = $(e.target); And lastly, make sure
  7. It's doing what GSAP does ... tweening a numerical value (which it found in the filename) over a duration. While that's not your intention, it is actually what GSAP does. So, my question is, what effect are you trying to achieve over those 5 seconds? Are you looking to fade one image into another?
  8. Without knowing what you're doing, I feel compelled to say it's not a bug of any kind. Post your relevant code to CodePen and we can give you a better answer. My guess, since what you're looking at in terms of filenames are ascending values, is you're tying the image call to the tween's progress, which goes from 0 to 1.
  9. The thing here is that the title (Sticky Title, I'm assuming) is in a position:fixed inside a position:absolute inside a position:absolute inside a position:relative (etc.) ... anything but static. Each of these is squeezing the scope of z-index. If it has to be there from a markup standpoint, I would advise, once reached, you use a bit of DOM manipulation to break it free from the positioned parents and let it live closer to the surface of the overall parent container.
  10. You could do something like this. https://codepen.io/sgorneau/pen/zYqVPWa If you ever need to run the full sequence again, just set tl.runOnce=false as part of the call.
  11. I'm not sure what you mean by "in the wrong positions". If what you mean is they are not fully out of the parent container and seem to "jump" prematurely, it's that you are not tweening them far enough. The container is three times the width of the element, moving from the center third by xPercent 100 will only move it to the right 3rd of the container (100% of the element's width). So 200% will get its left edge out of the container. As far as repeating the tween, you can do this all with one timeline and add reapat: -1 to the timeline's properties. https://codepen.io/
  12. You know, there are times where I say to myself ... "why did I even use jQuery for this". This is one of those times 🤣
  13. Hi @MitchellG, because X and Y move irrespective of positioning (and therefor aren't bound by relative parents), we just have to calculate where the top/left coordinate of the parent is, and move there. But, there are quite a few things that can get in way of this ... and your grid layout is one of them. The best thing to do is to start with a layout in the final position (with the added advantage that this position is what people would see if Javascript failed for some reason) and then use GSAP to tween from another location to the default position. https://codepen.io/
  14. Hi @gotofig2, This is just a matter of your selector specificity ... along with scope within the callback. https://codepen.io/sgorneau/pen/GRZaRqJ Using .nav-item as your selector for onmouseenter/leave and $(this), you can target the hovered element. Also, event.currentTarget is pure Javascript (not specific to jQuery), but I'm not sure if you were implying that it was a jQuery thing. -- Some other notes ... putting a scale or autoAlpha of 0 on something will put it out of reach of a hover/mouseenter event (and event.targ