Jump to content
GreenSock

mandooraj

Evernote chrome browser extension and GSAP

Recommended Posts

Hi,

 

I have tried a simple implementation of sliding animation(using scrollto plugin) which works smooth in firefox. in chrome with the evernote extension being disabled, the animation is smooth. when the extension is enabled, there occurs a stutter in the animation. Do you have any ideas? Here is my code

<div class="animation-container">
			<div class="slide" id="slide-1"></div>
			<div class="slide" id="slide-2">
				
			</div>
		</div>
body, html{
    height: 100%;
}

body {
	background: none #D8D6C3;
	overflow: hidden;
}

.animation-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

#slide-1 {
    background: none transparent;
}

#slide-2 {
	background: none #000000;
}
//References to DOM elements
var $window = $(window);
var $document = $(document);
var $slidesContainer = $(".animation-container");
var $slides = $(".slide");
var $currentSlide = $slides.eq(1);

//The height and width of the window
var pageHeight = $window.innerHeight();
var pageWidth = $window.innerWidth();


var slideAnim = new TimelineMax({paused: true});

// Initial Fill Animation
slideAnim.to($slidesContainer, 1, {scrollTo: {y: pageHeight * $currentSlide.index() }, ease: Circ.easeOut});
slideAnim.to($currentSlide, 1, {backgroundColor: "#0f0318"}, "-=1");

slideAnim.play();

Thank you

Link to comment
Share on other sites

Hi mandooraj

 

Right off the bat I don't see anything odd, but it's easier to figure out what's going on if you can make a CodePen.

 

So how did you narrow it down to Evernote? I always have the extenstion running in Chrome alongisde the desktop version, so they're always syncing, and have never experienced any problems that I could blame on Evernote.

 

Here's some scrollTo demos you can test out. You can also use the Up/Down arrows to scroll, and the Control button to speed up the second demo. 

 

See the Pen emEajW by osublake (@osublake) on CodePen

See the Pen myMNNL by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi OSUblake,

 

Thanks for the suggestion. I made a codepen and it works fine on chrome with evernote being enabled. When i open the same code from my local server(localhost), there is a stutter in the animation. In incognito, there is no such stutter though....

Link to comment
Share on other sites

Hi OSUBlake,

 

Just uploaded the code to my hosting. With evernote extension being disabled, the animation is smooth. When enabled, there is stutter in the animation. Check the following links... Codepen link works smooth though....  :shock:

 

 

http://natureatdoorstep.com/bsl/

See the Pen ByVoBd by mandooraj (@mandooraj) on CodePen



Thank you...

Link to comment
Share on other sites

Hi Mandoo,

 

I noticed that you are using a different version of GSAP on your server than you are on CodePen.

 

On your server you are using version 1.14.2 and on CodePen you are using the latest, which is 1.15.1. Try updating to a newer version.

 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>

// Or for the latest...
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Link to comment
Share on other sites

Hi OSUblake,

 

Thanks, I have updated the script to the latest version. But it doesn't make any change when evernote is enabled.

Link to comment
Share on other sites

If you cleared your cache and are still seeing a difference between CodePen and a normal browser window, my best guess would be that Evernote is initializing and parsing the page which is causing a delay.  Because CodePen runs in a frame, you won't see a delay like you do with a hard refresh.

 

Try adding a delay and a repeat to your animation to see if the problem still persists after some time has passed.

  • Like 2
Link to comment
Share on other sites

Hi OSUblake,

 

Yeah... When I added a minimal delay of 0.05 seconds, the animation runs smooth. Thank you very much man.

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