h-amad

@GreenSock thanks allot Jack! that's exactly what I was going for. quick side question, is Progress in snapTo(progress, self) being used here, or can we remove it?

Hey. thanks for the demo, I am not sure why but sometimes it is skipping random panels when they scroll into view, and I'm curious how I can use the demo with the normalized snap values in a seperate scrolltrigger as they actually worked pretty much how I wanted it, except it started snapping before the snappable sections scrolled in view. and it only messed up when I assigned a trigger, plus the start/end values to the second ScrollTrigger (the one with snapTo) so I didn't think the values would be the reason it stopped working. I tried debugging it here with logging the normalized value and its components (min, max, snapScroll) before and after assigning a trigger, those values stay the same, yet the calculated normalizd value changes. https://codepen.io/hmdpenning/pen/yLrywma?editors=0011

Hey guys, I am having an issue when applying start and end values to the ScrollTrigger so that the snapping effect happen only to certain part of the page. the snapping suddenly stops working like it did before I assign start/end values, and snaps to random values for each panel of the array I tried adding some padding to the container so the markers would not intertwine but it didn't help. here is a minimal demo. https://codepen.io/hmdpenning/pen/yLrywma ideal state would be that the snapping happens when top of the panels container reaches bottom of screen, and ends when its bottom reach bottom of the screen.

yes!! that looks so much better, thank you so much ! ❤️

Hey GSAP Team! I've been obsessing lately with gsap awesome features and had a little problem that I can't fix with my limited knowledge My goal is to /A/ have the squares (var icon, iconleft) on each side of a parent div (.slider-arrow) follow the mouse only when it enters the said parent div. Once the mouse leaves, /B/ the squares should smoothly return to their original position with opacity reducing to 0.2 (like in initial values), but instead it now goes to a random/unrecognizable position first before heading back to original position and partly fading away so i followed Cassie's advice on separating hover and mouse-move animation and also put the hover interaction on a SetTimeout longer than the duration of mousemove animation. but it still missing up with mouseleave, mostly at the beginning, I am wondering if there's something wrong with the code or is just being too complex? my coding skills are still at their start so apologizes in advance ! // The code pen simplifies what i have on my site, (a slider with images, the little green and red squares are slider arrows ..etc) // separated code to A and B for better understanding

thank you @Rodrigo , i didn't use the animation after all, it didn't make sense to me if they cant change heights.

Hello fellow members, I am trying to refresh Scrolltrigger on this tween but the start/end positions of the each img are not updating after height change of previous img. am i doing the refresh wrong or is there an easier way to achieve this?

Hi @Rodrigo i tried to basically do the exact same code on my website and it still doesnt work. here is my codepen, i cant really detect if it works here since there is no page-transition to see the flashing. https://codepen.io/hamadarabi/pen/ZEMaVQo In my Webflow link, you can see the issue right away when clicking on Portfolio button also webflow read-only link

Hi @Rodrigo there are many tween between them so it doesn't go behind 0, i also added a positive delay and problem still shows. since it is an if function that depends on page load i don't really know how to visualise the problem on codepen this is the whole code without the unrelated tweens window.addEventListener("load", function(event) { init(); }) function init () { const previousUrl = document.referrer; if (previousUrl === "http://localhost:3004/index.html" && window.location.pathname === "/Portfolio.html" && sessionStorage.getItem("visited") !== "true") { var pagetran = gsap.timeline(); pagetran .set(".my-picture", {autoAlpha: 1}, 0) .to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"}) // Set sessionStorage to true so that the if part doesn't run on refresh sessionStorage.setItem("visited", "true"); } else { var pagetran1 = gsap.timeline(); pagetran1 .set(".my-picture", {autoAlpha: 0, display: "none"}, 0) } } css is set to this. .my-picture {visibility: hidden;} This is basically a page transition animation where visitors see the .my-picture fade out if coming from the homepage. otherwise the .my-picture should be hidden on page refresh or coming from other pages. does this help you understand it?

thank you @mvaneijgen this is indeed very useful, sadly it helped only halfway through because my animation is an if & else function that depends on previous url: so when i wrapped the whole animation in function init () {...}and added a window.addEventListener("load", function(event) {init();, it worked on the else part because element was originally set to visibility: hidden in css. but in the if part, the targeted element is supposed to be visible from the beginning and fades out so i tried playing around with AutoAlpha one option i tried in the if block is this .set (".my-picture", {autoAlpha: 1}, 0) .to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"}, "<-1.2") it worked in the case of making it visible so it fades out but it hides for a second before it's visible. any tip how to fix this?

Hi @GreenSock Jack! first, that was very informative thank you allot! My intention was exactly the toggling i should have not used .to() that solved my problem thank you all! one extra question if u have capacity for it: is there any ''Greensock/GSAP'' way to make sure the toggle .set display:none happen before a page loads? so that users don't see the element vanishing for a second before it is removed ? (it needs to be display:block initially then being removed with display:none)

thank you @Rodrigo for joining, I don't want to animate display as in setting duration or easing, i just want two display tweens to happen simultaneously, like here for example or is this also called animating ? this is basically doable using regular web flow interaction but i want to achieve it using only GSAP .to(".fake-portfolio", { display: "none" }) .to(".page-title-portfolio", { display: "block"}, "<") sorry had to make a long screenshot ?

Hey @Ali Manuel Thank you for the quick reply, I should've clarified this before, I only coloured them to show they are different divs but the purpose of the animation is that they kind of switch position (when one disappear and the the other shows up) without the user noticing any of it.

Hello Greensock members i am having this very strange issue that two display animation are supposed to happen at the same time but only happening after one another. i tried other options like (fromTo, visibility:hidden, and setting the same absolute timeline position) but they still fire after each other. My desired result is that green Portfolio disappear the moment the blue Portfolio shows up without the user noticing it (so at the same time) am i doing anything wrong with the timeline animation? os are display tweens just this hard to control? (green and blue are only to clarify that they are different divs, originally they are both green and user shouldnt notice the animation happening) ps: -I cant use opacity animation, it needs to be display: none ? - this is a page transition animation but only copied the navbar for codepen purposes. -using webflow interaction tool, the display animations did happen at the same time but the purpose here is to make all of the animation on gsap code

Thanks allot @Rodrigo

Hi Cassie; I am pretty new to this do you know if it is possible to use this code but instead of transform animation (i.e. yPercent) we change Position ? (i.e. position: relative to position:absolute) ? basically it will be position absolute when mouse is out, then become position:relative when mouse in hovering on.