["Display: none" breaks Scrolltrigger]

@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.

["Display: none" breaks Scrolltrigger]

@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" }

 

 

["Display: none" breaks Scrolltrigger]

@GSAP Helper: I am confused by your "answer".

I add the link to codepen. In my first post.

 

 

["Display: none" breaks Scrolltrigger]

@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

 

 

 

["Display: none" breaks Scrolltrigger]

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.

See the Pen KKYMJez by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Flip Plugin just stopped working]

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 .

[Flip Plugin just stopped working]

@mvaneijgen: Thanks very much.

It seems to work. At least on codepen.

I will try on my wordpress installation.

[Flip Plugin just stopped working]

I had to simplify everything and create a codepen to illustrate the issue.

 

This is my codepen: 

See the Pen rNopGXj by KwabenaOwusu (@KwabenaOwusu) on CodePen

 

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

 

[Flip Plugin just stopped working]

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

[Staggered Animation - Jump between Last and first scene]

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

[Staggered Animation - Jump between Last and first scene]

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"
});

 

See the Pen NWevpKL by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Scrolltrigger.observe - Where to put code for individual animation]

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

 

[Scrolltrigger.observe - Where to put code for individual animation]

@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.

 

 

[Scrolltrigger.observe - Where to put code for individual animation]

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

See the Pen jOXVdEK?editors=1111 by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Scrolltrigger - Custom Scroller instead of Window?]

@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".

[Scrolltrigger - Custom Scroller instead of Window?]

Hey Folks,

I've spent almost a day trying to figure out simple things but failed.

Issue: I have a pinned section (images stacked on each other).

Below that section I have three textboxes which are meant to scroll up until the bottom of that box meets the bottom of the pinned section. Then fade out.

 

My logic is all over the place I feel like giving up.

 

Could someone point me in the right direction?

Thanks very much.

 

 

 

See the Pen QWzwPJG by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Question regarding your horizontal scrolling example]

@Carl: Thanks very much.

Yes, I enrolled in your course three months ago (26th May ). I am currently on the monthly subscription. I think I will switch to the "lifetime" package.

BTW you are the best coding teacher. Your courses are great.

[Question regarding your horizontal scrolling example]

Hi Team,

I am a GSAP newbie , Club Green Sock member , I bought a  snorklTV  creativecoding membership.

Short: I am trying my best to learn as much as I can.

 

Question: In the above example the container width is 600% but for the scrolltrigger you set  -> end: "+=3500".

 

Could let me know why 3500 px from the starting point (trigger element)?

 

Thank you.

 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

[Observer Plugin - Forcing Scrollbar ?]

@mvaneijgen: Thanks very much. I thought I missed something in the Observer docs.

[Observer Plugin - Forcing Scrollbar ?]

Hi All,

Issue: Sections with 100vh / 100vw stacked on each other (full page) so scrollbar not showing. 

Solution tried: I set sections height to 110% hoping to get scrollbars but scrollbars still not showing.

I don't need the scrollbars but the issue is that, Observer plugin is ignoring keyboard up/down  and I dont want to assume that everybody has a mouse with scrollwheel.

I edited the configuration for Observer but still keyboard is been ignored. Thanks for help.

Type: "wheel,touch,scroll,pointer"

See the Pen GRwVvGW by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Observer - Fix Background Color]

Thanks very much for pointing me in the right direction, Cassie 😊

I will try to find a solution.

 

Regards

[Observer - Fix Background Color]

Hi All,

I want to thank you in advance for taking your time to read.

I am new to GSAP and and somehow intermediate CSS/JS guy.

 

All day I've been trying to find out what I am missing.

Issue: the background color (body) becomes visible during the animation. In your original pen as well as another one I studied, the background color of the body is not visible during the transition. This is what I am trying to achieve.

 

I have set body background-color to make it even more visible.

 

This is the original pen (using background images): 

See the Pen GRQKPMo by GreenSock (@GreenSock) on CodePen

 

This is a copy I studied as well: 

See the Pen mdXbLOJ by Chybosky (@Chybosky) on CodePen

 

My pen: 

See the Pen ZEmgaYB by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Layered Pinning - Last section loosing color]

Wow, thanks very much. Yes, it works.

 

[Layered Pinning - Last section loosing color]

Hey All,

I have been trying to solve this issue for hours. Still no luck.

Maybe someone can point me in the right direction.

 

Issue: Last section ("panel grey" ) always picks up the background color of the previous section.

I think I am missing something  (array length and the counting, maybe ?). CSS should be fine.

 

Thanks very much.

See the Pen YzRYpJG by KwabenaOwusu (@KwabenaOwusu) on CodePen