KwabenaOwusu

@Rodrigo: Thanks very much for your effort. After going through the docs, I think I have to experiment with ScrollTrigger.refresh(); because I am altering the whole structure by "taking out" that container. I think Scrolltrigger needs to recalculate.

@Rodrigo: I will try again to put it in simple terms. 1. The green container contains the preload animation and only this should be shown until animation finishes. 2. The rest (mainContainer) is hidden in the beginning. 3. As soon as the animation finishes, the rest(mainContainer) is unhidden and the window scrolls automatically to this container. 4. preloaderContainer should be then hidden. This line (line 36) in my code breaks scrollsmoother. .to(preloaderContainer, { display: "none" }

@GSAP Helper: I am confused by your "answer". I add the link to codepen. In my first post. https://codepen.io/KwabenaOwusu/pen/KKYMJez

@Rodrigo: Thanks very much for the useful hint. I followed your advice and it is working. Unfortunately I am encountering a small issue I couldn't solve yesterday. I am trying to hide "preloadContainer" after the animation is done. I created a master timeline and I can find the right spot to add: gsap.to(preloadContainer,{display:"none"}) . Goal: Scroll down to mainContainer using "gsap.to (window,{scrollTo:mainContainer}) and hide preloadContainer, which is above mainContainer. My timing is off: preloaderContainer is hidden before the animation (scrolling down finishes). Thanks in advance

Hi All, I am encountering an issue which I couldn't solve in the last two days. Structure using two main containers: "preloadContainer" and "mainContainer". preloadContainer contains an animation, which runs on page load. mainContainer is hidden using "display:none". After animation finishes, mainContainer is set to display:"block". I am using ScrollSmoother. It seems that hidden an element with "display:none" and unhidding it with "display:"block" breaks ScrollSmoother. "Visibility:hidden" and then "autoAlpha:1" does not break scrollSmoother but I cannot use that (User could scroll away from animation container). Any ideas? Thanks very much.

Hey @mvaneijgen, unfortunately position:fixed didn't solve the issue. I am trying to understand what you are proposing. Obviously all content is wrapped in "smoother-wrapper" ->"smooth-content" In a container named " preview" I have those clickable elements which animate using Flip to show and hide "details". "Preview" and "details" are separate containers. You mean I should put "details" inside of "preview"? Thanks .

@mvaneijgen: Thanks very much. It seems to work. At least on codepen. I will try on my wordpress installation.

I had to simplify everything and create a codepen to illustrate the issue. This is my codepen: Codepen Link Issue: It seems SmoothScroller css is the main issue or I am missing something. Code works fine but the element to be revealed to pushed to the top of the page and becomes invisible because the it has "position:absolute". As far as I can see SmoothScroller container is also assigned "position:absolute". How do I solve the issue. My goal: Element to be revealed should show up in the current scroll position. Thanks very much in advance

Hi Team GSAP, The flip plugin just stopped working. Even though I didn't change the code. The console doesn't show any errors either. Do you have any suggestions? Thanks

@mvaneijgen: Thanks very much. I am already subscribed to his course. Seems I jumped over that part. I will have a look.

Hey All, It seems I am missing something basic. In this staggerd animation ( FADE IN ANIMATION). There is a jump between first and the last scene. I have three DIVs positioned absolutely. So I was expecting DIV 'THREE' to be the first scene because I didn't change z-Index. But somehow the animation starts with DIV 'ONE'. My goal: Fade in image within 3 seconds. Image then stays visible for 3 seconds, then fade out. Thanks for your time. /*CREATE ARRAY */ let fadeInImages = gsap.utils.toArray(".swapMe"), numOfFadeInImages = fadeInImages.length; /*FADE-IN ANIMATION*/ let fadeAnim = gsap.timeline({ repeat: -1 }).from(fadeInImages, { autoAlpha: 0, duration: 3, stagger: { amount: 9 }, ease: "none" });

@Rodrigo : Thanks very much. That is the solution I was looking for.

@Rodrigo Thanks very much. I was trying to find out for example how to reverse the animation in this case. So far I am only familiar with ToggleActions or onLeave etc.

Hey All, Thanks for your time. Scenario: I am using a Scrolltrigger.observe example I found in this forum and want to modify it slightly. Issue1: I think any animation code should be in function gotoPanel. But somehow simple animations are broken, once they run twice or three times. Issue 2: How to I reverse animations if code goes into function gotoPanel part instead of creating an animation and linking that animation to the Scrolltrigger ( e.g. if I move H1 in a panel to right. Right now animations stay in their new state /* EXAMPLE ANIMATION */ let panelHeading = target.querySelector("h1"); gsap.to(panelHeading, { color: "red" }); Any hints? Thanks very much in advance

@Rodrigo : Thanks very much. I should spend more time on ScrollTrigger docs. I need to figure out how exactly customer scroller works and how to use functions for 'start" and "end".