Jump to content
Search Community

GSAP Android Chrome Issue & Flicker at start

TeamHype test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk.

My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth.

Any and all assistance would be greatly appreciated, my code is below.

jQuery(document).ready(function($) {
	// Scroll Magic Controller

	var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller

	// Animation vars

	var 
		htmlContainer = $('html'),
		body = $('body'),
		viewPort = $(window).height(), // Height of viewport
		heroSection = $('.hero-section'),
		panelClickthroughs = $('.panel-clickthroughs'),
		portfolioPanels = $('.portfolio-panel'),
		portfolioSection = $('.portfolio-section'),
		socialSection = $('.social-section'),
		scrollDown = $('.scroll-down'),
		scrollDownArrow = $('.scroll-down i')
		header = $('header'),
		heroContent = $('.hero-content'),
		logoContainer = $('.logo-container'),
		logo = $('#hype-logo'),
		letter = $('.letter'),
		letterFill = $('.letter_fill'),
		logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"),
		overlayMenu = $("#overlay-menu"),
		listItemsOverlay = $("#overlay-menu #primaryMenu ul li"),
		heroBackground = CSSRulePlugin.getRule(".hero-panel:before");

	var fadeSlogan = function () {
		TweenMax.to(header, 1, { y: 0, autoAlpha: 1 });
		TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 });
		TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 });
	};

	function urlChecker() {
		if( window.location.href =="http://2017.hypemarketing.uk/" ) {

			var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations
			otherAnimations
				.set(heroBackground, { opacity: 1 }) //has been set in css to remove skip
				.set(logo, {visibility:"visible"})
				.set(letterFill, {visibility:"hidden"})
				.set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn })
				.set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn })
				.set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn });

		} else { 
			//Do nothing
		}
	} urlChecker();

	// TweenMax Timelines

	var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio
	var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim

	timelineHero
		.set(heroSection, { top: 0, position: 'absolute', force3D:"auto" })
		.to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero

	entranceAnim
		.set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" })
		.set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"})
		.fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes)
		.fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype
		.to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text
		.to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white
		.to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background

	// Scroll Magic Scenes

	var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section
	var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section

	// Scroll Down Button Begin

	TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' });
	TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' });

	scrollDown.click(function(){
		TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out
	});

	// Scroll Down Button End
});
Link to comment
Share on other sites

NAAAAARRRRWICH!

 

Lovely place. :)

 

Your flicker is most likely caused because it takes a moment for the JS to kick in and GSAP work its magic. You need to structure your files, CSS and logic taking that into account.

 

One quick and dirty way to solve it is to have visibility:hidden on the target element and tween the autoAlpha to one once the JS kicks in.

 

As for the slowness in mobile well, a mobile is less powerful than a desktop (duh!) and more often than not you have to take that in consideration and limit the amount of stuff that is happening so that it can perform.

 

I'm afraid we have very limited resources to go over the whole of your website and help you debug. My suggestion would be to take away all the fancy moving bits and see if it improves. Go taking bits away until it is smooth. Only then, start adding things until you get a nice balance of performance and effects.

  • Like 5
Link to comment
Share on other sites

  • Solution

Hello TeamHype, and Welcome to the GreenSock,

 

Also to add to Pedro's great wisdom,

 

I notice in one or more of your to() tweens you are animating top CSS property. You should never animate CSS position offsets like top, bottom, left, and right. You should animate y instead of top.. and animate x instead of left.

 

CSS position offsets will trigger layout to be calculated on each frame, and will cause bad performance. Animating with CSS transforms like x and y will ensure you animate on a sub-pixel level using hardware acceleration buttery smoothness.

 

I do notice you are also animating width, which like top and left can animate flicker flack due to width not animating on a sub-pixel level and causing layout to be calculated over and over again during the course of the animation. You could add GSAP special property autoRound:false, on the tween animating width, but still width will animate poorly especially if your using scrolling animations will cause everything on the screen to massively repaint. See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

And like Pedro (Dipscom) advised you should make anywhere you are using opacity and use autoAlpha for better performance. Even when you use set(), See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Also the tweens that you are animating in y. I would suggest to add a slight rotation:0.01 to those tweens GSAP knows to animate them using matrix3d(). Keep in mind that force3d: "auto" is the default so you dont need to have it in your tween. See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

See this article by GreenSocks Jack on CSS Tricks about why animating with CSS transforms are better than CSS position offsets like top and left.

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Making those changes will give you better performance.

 

If you are still having an issue, please create a reduced codepen demo example with the tweens giving you trouble. Since debugging your site will be really difficult.

 

 

See the CSSPlugin Docs:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Even though ScrollMagic is made with GSAP, it is not made by GreenSock. So keep that in mind ;)

 

:)

  • Like 4
Link to comment
Share on other sites

There's lots of potential problems, but it's hard to tell on a live site. A CodePen demo is much easier to troubleshoot.

 

First, I wouldn't create all your variables and animation logic inside a resize event. And you might want to check your variables. Declaring them with a single var is very error-prone...

var 
  ...
  scrollDown = $('.scroll-down'),
  scrollDownArrow = $('.scroll-down i') // <= Possible issue
  header = $('header'),
  ...
  heroBackground = CSSRulePlugin.getRule(".hero-panel:before");

You also have a bunch of CSS transitions on your elements. You need to make sure GSAP is not trying to animate a property that also has a CSS transition on it.

 

There's other stuff, but I would try fixing those first.

 

.

  • Like 3
Link to comment
Share on other sites

Just want to thank you all for your assistance, I went through and amended my code to reflect your recommendations, and I found the source of the problem to be the width transition for the line underneath the logo, I have now amended this.

Thanks again!

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