Shaun Gorneau

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

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!

Good lord ... Monday fog brain here ... I was chaining simple tweens as if I was working with a timeline. ?

Oh geeze .. yeah, I was chaining some calls and forgot that last semicolon. Doh! ?‍♂️

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.

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 all of your selectors are scoped to the element being interacted with (not broad calls to all matches). https://codepen.io/sgorneau/pen/wvWJypq

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?

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.

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.

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.

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/sgorneau/pen/QWNXOyN

You know, there are times where I say to myself ... "why did I even use jQuery for this". This is one of those times ?

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/sgorneau/pen/BaKebOQ

@gotofig2, happy to help!

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.target). Opacity alone is accessible to these events. But any combo with scale 0 will render it inaccessible. In the cases where you need something to be "invisible" but actionable ... it's best to stick with opacity or backgroundColor ... and not use scale 0. https://codepen.io/sgorneau/pen/ZEWNEyo?editors=1010

So I took a quick and dirty stab at this as a fun personal challenge on a Monday evening. What better way to get the creative juices flowing for the week ?? https://codepen.io/sgorneau/pen/yLOrqrQ Also .. the effect is better in a bigger view codepen.io/sgorneau/full/yLOrqrQ Better with a Matrixy font https://codepen.io/sgorneau/pen/oNxOJjL I also realize this is not the effect OP was getting at ... Zach's recommendation of scramble text is perfect for what OP is looking for (which is reminiscent of the phone number digit matching scene in the Matrix, although the matched digits aren't part of any scramble).

Yup, that changes things ?

Found this using the search term "matrix code effect javascript" https://codepen.io/riazxrazor/pen/Gjomdp

Hi @kylerumble, What you're looking for here is a pretty straight forward ... ease: bounce; https://codepen.io/sgorneau/pen/ZEWwjpw

Hi @nevanthegreat, usually CMSs have different theme layers for public and admin sides and you’d be able to control which JS is included in your theme config file or something similar. If your admin side is using the public side’s theme, you can typically wrap your <script> in server side (PHP, for example) logic that only outputs the <script> if something like $admin is false or a $user->id is 0.

Is this more along the lines of what you're looking for ... unaffected persepctive? https://codepen.io/sgorneau/pen/wvGdBRQ

At this point, I'm at a loss for what you're looking for. I think I might know what you're looking for (codepen in next comment)

@artstyle Based on what you bulleted out, you could do something like this https://codepen.io/sgorneau/pen/oNxWNVg

I think what you're interpreting as rotation on the Y axis is actually the perspective shift due to it translating on the x axis.

It's not translating the Y, it's simply scrolling the element in the window (in the natural layout) before after the ScrollTrigger start/end points.