Jump to content
Search Community

GSAP + ScrollMagic - Text flicker issue on load

RobbieC test
Moderator Tag

Recommended Posts

Afternoon guys!

I came across an issue with my current project; so I peace'd together a codepen to recreate this issue to see if anyone could help me out.

 

In order to correctly see the issue you need to view the codepen in full screen mode and do a HARD refresh of the page. As soon as the page starts to load you will see the text "Portfoio" flicker at the top of the page for less than a second and then it will flicker again and appear in its correct position. The text "Portfolio" is being used as my parallax effect which displays behind the placeholder images.

 

I'm using ScrollMagic to pin the section which has horizontal scroll and GSAP to control the parallax. So i'm not sure where the issue is being created if its a GSAP issue in my code or ScrollMagic. I will add that the original GSAP code was from an older version and i tried to convert it to GSAP V3, so there could be an issue with my migration.

 

I have other sections in my site that are using GSAP and ScrollMagic but since I was able to recreate the issue with the code provided in the codepen; I don't think the other sections in my site are causing the issue.

 

Please let me know if I need to provide for information or code.

See the Pen NWqedKy by robbiecren07 (@robbiecren07) on CodePen

Link to comment
Share on other sites

12 minutes ago, RobbieC said:

In order to correctly see the issue you need to view the codepen in full screen mode and do a HARD refresh of the page.

 

I don't see any problems, but if you need to do a hard refresh to see the problem, that probably means you need to wait for images and other assets to load.

  • Like 4
Link to comment
Share on other sites

Yes that makes sense but on my project this portfolio section is at the bottom of the page and there is a lot of plain text above it and none of that text does the flicker. Also it does it anytime I reload the page in my project environment. The reason why I said to do the hard refresh is cause once you open up into the full screen view your browser will load it from cache.

 

I just added 3 large images above the portfolio section to increase the page load time and I also added some plain text to the spacer section. Now you are correct you don't see the issue - cause your browser is cached. If this was a finished site and someone loaded the site for the first time, they would see the big gray portfolio text flicker.

 

I can see that this is a load issue, but why is that the only text that has a flicker at the start of the page load, I have plenty of other plain text above the portfolio section in my project. So to test that I added a line of text in the spacer section above portfolio and did a hard refresh and still only the word "portfolio" had the flicker.

 

Check out the updated codepen please:

 

So as i'm typing this reply I just did another test and I removed the JS code:

console.clear();
var ctrl2 = new ScrollMagic.Controller();

  var tlp = new gsap.timeline();
  var child = document.querySelector(".portfolio__title");
  tlp.to(child, {duration: 1, x: -300, ease: "none"});

  var scene2 = new ScrollMagic.Scene({
    triggerElement: "#portfolio",
    triggerHook: "onLeave",
    duration: "400%"
  })
    .setTween(tlp)
    .addIndicators({
      colorTrigger: "white",
      colorStart: "white",
      colorEnd: "white",
      indent: 10
    })
    .addTo(ctrl2);

Which would remove the parallax effect and the word "portfolio" would basically be plain text and I did a hard refresh and the flicker still happened. I'm thinking now that maybe its something in the CSS? - I'll do a little more digging later tonight.

Link to comment
Share on other sites

So after a good nights rest I woke up this morning and took another look at my code and found the issue was indeed in my CSS.

I was missing the position relative on my parent div. 

.portfolio {
	position: relative;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

 

I want to apologize for prematurely posting this issue and thank you for taking the time to read my post @OSUblake.

  • Like 1
Link to comment
Share on other sites

1 hour ago, RobbieC said:

I was missing the position relative on my parent div. 

 

I feel your pain! I've been stumped by that problem more times than I can count, but I've learned my lesson. Whenever I start on a project, the first thing I do is add this to my CSS.

 

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

 

Trust me, it's a lifesaver.

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

38 minutes ago, ZachSaucier said:

I'm disappointed you don't use double colons :) 

 

I just copied and pasted that part from CSS tricks... the box sizing part.

https://css-tricks.com/box-sizing/

 

But serious question. What's the difference? I don't think I truly understand the difference.

 

38 minutes ago, ZachSaucier said:

I usually don't include the position: relative because sometimes I want elements to be positioned related to a grandparent.

 

How often do you really need that? The amount of times that I've needed an element to positioned next to a grandparent is... well, like 4 times.

 

Just kidding. I honestly don't know how many times, but it hasn't been a lot.

 

I like using relative for all elements because, well basically that's what you really want. Without it, you have to debug why setting left, top, and z-index don't work. It gets even crazier when you throw in stacking contexts.

 

I learned about this relative tip from David Khourshid.

 

 

 

He does some pretty amazing work.

See the Pen popular by davidkpiano (@davidkpiano) on CodePen

 

  • Like 2
Link to comment
Share on other sites

26 minutes ago, OSUblake said:

What's the difference? I don't think I truly understand the difference.

:foo is a pseudo-class. ::foo is a pseudo-element. The only reason why you should use :foo for psudeo-elements is if you need IE 8 support :D 

 

28 minutes ago, OSUblake said:

How often do you really need that? The amount of times that I've needed an element to positioned next to a grandparent is... well, like 4 times.

Just kidding. I honestly don't know how many times, but it hasn't been a lot.

More often than you might think. Nav-related animations in particular.

  • Like 1
Link to comment
Share on other sites

Wow this has started a great discussion. I would have never thought to add the position relative like that. My mind is blown away right now, I can’t wait to try it out.


As for the pseudo:

17 minutes ago, ZachSaucier said:

:foo is a pseudo-class. ::foo is a pseudo-element.

I’ll have to agree with Zach, I think I have only ever used :: on nav animations.


For Blake’s original reply, I think this is great and a great idea to add this in my CSS template. 

1 hour ago, OSUblake said:

*, *:before, *:after { box-sizing: border-box; position: relative; }

It not only would of saved me the headache with my original issue, it creates less code in my CSS file.

 

Thank you both once again for sharing your knowledge!

  • Like 2
Link to comment
Share on other sites

32 minutes ago, ZachSaucier said:

:foo is a pseudo-class. ::foo is a pseudo-element. The only reason why you should use :foo for psudeo-elements is if you need IE 8 support :D 

 

Ha... noted. I def don't care about any version IE.

 

33 minutes ago, ZachSaucier said:

More often than you might think. Nav-related animations in particular.

 

Do you have a demo of that? I'm genuinely interested in seeing the difference.

 

Link to comment
Share on other sites

I can try to put together a working demo on codepen later today.

 

Also a side note from MDN:

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

CSS3 introduced the ::beforenotation (with two colons) to distinguish pseudo-classes from pseudo-elements. 


For me when CC3 came out I didn’t sit down and learn all the changes. So I’m not sure when I started using double colons, but I know in the past I created something that only worked with double colons, so I’ll try to dig that up to show you.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...