Jump to content
Search Community

Help a noob with Safari animation speed issues!

Mattrudd test
Moderator Tag

Recommended Posts

Hi,

 

Firstly, thanks for building such a fantastic free resource, that's enabled more visually-minded people like me to realise code-reliant ideas.

 

Secondly, worth a disclaimer (which will soon become apparent) that I'm pretty fresh to javascript, with only pretty rudimentary html/css skills! So forgive me in advance.

 

Due to my level of coding ability (and wanting to stick to my strengths!) I'm using Divi to build my website. I've managed, after hours of tweaking, to make the fantastic walkthrough by Jiaju Ma work for my purposes...

 

...But only just. Here's the page: http://www.purposebuilt.co.uk/portfolio/wordpress/?page_id=5801 (Codepen attached).

 

On Chrome the text animation builds smoothly on scroll, but on Safari it doesn't. The text appears before slowly 'reverse-animating', then allow for the tween to happen on scroll but with a painfully slow and jerky motion.

 

I'm wanting the text to not show until scroll occurs, then build smoothly on scroll.

 

Can anyone advise how I can make this work? Have done a bit of research and understand that SVG can cause lag. Also, wondering whether the fact that all the JSON code has been added to the divi 'add-on' code element (instead of being called as a separate script file) is a factor? I did once get an energy warning form Safari, a tell-tale sign for even a beginner like me that the load caused by this page is too big?

 

Thinking this is more about the way I'm implementing GSAP than Scrollmagic, but I could be wrong!

 

Thanks loads in advance!

 

 

Matt (noob)

 

 

See the Pen MWwjjaw by matt-rudd (@matt-rudd) on CodePen

Link to comment
Share on other sites

Hey Matt and welcome to the GreenSock forums!

 

My goodness, that is a lot of data. 

 

This issue has nothing to do with GSAP (or even ScrollMagic which isn't a GreenSock product by the way). The same performance issue occurs if you remove both GSAP and ScrollMagic:

See the Pen JjdRZJe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Hernan, the creator of Lottie, mentioned that 

Quote

I think you're using the expansion property of masks, right?
That gets converted in svg to a filter and a mask instead of a clipping path.
Some browsers like Safari don't have good performance with filters, if you can redo the animation only changing the mask shape, it will perform much better.

 

Removing the need for filters and masks (perhaps overlaying the text with black and animating those black parts to reveal the text) would improve your performance, as would using a sprite sheet, but besides changing your approach there's not much else you can do.

  • Like 4
Link to comment
Share on other sites

Hi Zach, thanks for coming back to me so quickly!

 

Apologies, I should've made it clearer that I know this is a code issue rather than a GSAP or any other library thing, but more the way I'm putting it all together. 

 

Just got a sense that this forum was a welcoming, friendly place to start my investigations/get a pointer that could save me another week ha!

Thanks for proving me right on that front.

 

Not wishing to do the original workflow author down at all, but I simply copied his method of pasting the JSON code directly into the main .js. I'll look into your suggestion about using black instead of character morphs - that makes a lot of sense.

 

  • Is that what you mean by a change in approach - redo the way the initial Bodymovin file is built? (Again, probably a question more for them than you Greensock folk!)
  • Or is there a better way to code this than the linked example I've bent into my own shape?

 

For now, I'm off to learn what a sprite sheet is/does!

 

Thanks again

 

Matt

 

Link to comment
Share on other sites

15 minutes ago, Mattrudd said:

Is that what you mean by a change in approach - redo the way the initial Bodymovin file is built?

Yes. The less filtering/masking you have to do the better performance wise. A sprite sheet would probably be your best option since you already have the animation in After Effects.

 

It's essentially a bunch of animation frames in picture forms. You just jump between the frames to make it look animated (like a flip book).

  • Like 1
Link to comment
Share on other sites

7 minutes ago, mikel said:

 

Good idea ...

 

 

 

 

Happy tweening ...

Mikel

Hi thanks Mikel for your input! I'm a little too married to the way the characters build from their outlines, rather than the lateral swiping you've created here.

 

In awe of how you can put that together so quickly though!

 

 

Matt

Link to comment
Share on other sites

15 minutes ago, ZachSaucier said:

Yes. The less filtering/masking you have to do the better performance wise. A sprite sheet would probably be your best option since you already have the animation in After Effects.

 

It's essentially a bunch of animation frames in picture forms. You just jump between the frames to make it look animated (like a flip book).

Thanks again Zach for helping to narrow my focus.

Link to comment
Share on other sites

So, folks, after taking time this afternoon to dig into sprite sheets, I've managed to get somewhere, thanks to a relatively simple (for me, and my next-to non-existent coding skills!) tutorial by Dennis Gaebel. Thanks Deniis, if you ever see this!

 

https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795

 

I'm pretty chuffed to have got these results, by figuring out how to make the spite sheet then, with some newly-educated guess work, how to figure out the size changes from Dennis' sheet to mine. The text I'm animating has changed from 'Purpose Built' to this.

 

See the Pen oNXYPbZ#code-area by matt-rudd (@matt-rudd) on CodePen

 

One thing I'm not sure on yet is how to reduce the scroll height of the animation, so if anyone has any tips on that, I'd be grateful!

Quite sure it's to do with the section of js here?

 

duration: (frame_count * offset_value) + 'px',

 

It was easier to change the duration in the first pen I posted, as that was measured by a percentage.

 

Thanks again for humouring me on this!

Link to comment
Share on other sites

Final note from me - what would have been the perfect solution, as a graphic designer, would have been a way of creating a sprite sheet using svgs, so as to 'vectorise' the text. 

 

I did some research but couldn't find anything substantial enough to guide me in this.

Link to comment
Share on other sites

19 minutes ago, Mattrudd said:

Is there a virtual way I can buy you a pint? 😊

Haha, don't worry about it. We like to help people here :) 

 

But we always appreciate people getting a Club GreenSock membership! You get all the GreenSock goodies and we get to keep doing the work that we do.

 

16 minutes ago, Mattrudd said:

what would have been the perfect solution, as a graphic designer, would have been a way of creating a sprite sheet using svgs, so as to 'vectorise' the text. 

Why is that better than using After Effects to export a sprite sheet?

 

FYI you don't need ScrollMagic. It's a little bit more work development wise, but you can combine the sprite sheet functionality in the thread below with the scroll animation of the demo below:

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

  • Like 1
Link to comment
Share on other sites

Quote

Why is that better than using After Effects to export a sprite sheet?

Because using the PNGs means the image isn't infinitely scalable, should I require it to be.

 

That;s the main reason why I went with Lottie in the first place, but then ran into the speed issues. I couldn't replicate the effect I wanted without the troublesome effects.

 

Not an issue for me this time really as I'll be scaling down the instance above, not up.

Link to comment
Share on other sites

Hi Zach,

 

Forgive me for reopening this thread, and continuing to ask about something off the Green Sock grid! (I’ve tried on more related forums such as Divi Help and Stack Overflow without any joy 😥)

 

Fully understand that using visual builders is frowned upon by proper coders, and that you may not be familiar with Divi or use Wordpress, but I’ve tried everything and am running against a wall here! So any pointers would be massively appreciated once oagain.

 

I found a codepen tool that minifies code from Codepen to make it Divi friendly.

 

I  included the js library links and added to a Divi code module. So code looks like this:

 

<style> html, body { height: 100%; background-color: #000000FF; } body { width: 100%; } .header { color: white; font-size: 50px; } .section { height: 50%; background: #293744; color: #899eb5; } .scene { height: 100%; width: 100%; background: #000000; } .center { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100%; } .viewer { height: 100%; margin-left: auto; margin-right: auto; max-width: 1313px; width: 100%; background-image: url(http://mrcreative.co.uk/spritesheet.png); background-repeat: no-repeat; background-position: 0 50%; } .viewer.frame1 { background-position: -1313px 50%; } .viewer.frame2 { background-position: -2626px 50%; } .viewer.frame3 { background-position: -3939px 50%; } .viewer.frame4 { background-position: -5252px 50%; } .viewer.frame5 { background-position: -6565px 50%; } .viewer.frame6 { background-position: -7878px 50%; } .viewer.frame7 { background-position: -9191px 50%; } .viewer.frame8 { background-position: -10504px 50%; } .viewer.frame9 { background-position: -11817px 50%; } .viewer.frame10 { background-position: -13130px 50%; } .viewer.frame11 { background-position: -14443px 50%; } .viewer.frame12 { background-position: -15756px 50%; } .viewer.frame13 { background-position: -17069px 50%; } .viewer.frame14 { background-position: -18382px 50%; } .viewer.frame15 { background-position: -19695px 50%; } .viewer.frame16 { background-position: -21008px 50%; } .viewer.frame17 { background-position: -22321px 50%; } .viewer.frame18 { background-position: -23634px 50%; } .viewer.frame19 { background-position: -24947px 50%; } .viewer.frame20 { background-position: -26260px 50%; } .viewer.frame21 { background-position: -27573px 50%; } .viewer.frame22 { background-position: -28886px 50%; } .viewer.frame23 { background-position: -30199px 50%; } .viewer.frame24 { background-position: -31512px 50%; } .viewer.frame25 { background-position: -32825px 50%; } .viewer.frame26 { background-position: -34138px 50%; } .viewer.frame27 { background-position: -35451px 50%; } .viewer.frame28 { background-position: -36764px 50%; } .viewer.frame29 { background-position: -38077px 50%; } .viewer.frame30 { background-position: -39390px 50%; } .viewer.frame31 { background-position: -40703px 50%; } .viewer.frame32 { background-position: -42016px 50%; } .viewer.frame33 { background-position: -43329px 50%; } .viewer.frame34 { background-position: -44642px 50%; } .viewer.frame35 { background-position: -45955px 50%; } .viewer.frame36 { background-position: -47268px 50%; } .viewer.frame37 { background-position: -48581px 50%; } .viewer.frame38 { background-position: -49894px 50%; } .viewer.frame39 { background-position: -51207px 50%; } .viewer.frame40 { background-position: -52520px 50%; } .viewer.frame41 { background-position: -53833px 50%; } .viewer.frame42 { background-position: -55146px 50%; } .viewer.frame43 { background-position: -56459px 50%; } .viewer.frame44 { background-position: -57772px 50%; } @-webkit-keyframes drink-coffee { to { background-position: -1800px 50%; } } @keyframes drink-coffee { to { background-position: -1800px 50%; } }</style><section class="scene section" id="sticky"> <div class="viewer"></div> </section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.js"></script>
<script type="text/javascript"> var viewer = document.querySelector('.viewer'), frame_count =44, offset_value = 50, speed = 60; var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0, reverse: true } }); new ScrollMagic.Scene({ triggerElement: '#sticky', duration: (frame_count * offset_value) + 'px', reverse: true }) .setPin('#sticky') .addTo(controller); for (var i = 1, l = frame_count; i <= l; i++) { new ScrollMagic.Scene({ triggerElement: '#sticky', offset: i * offset_value }) .setClassToggle(viewer, 'frame' + i) .addTo(controller); }</script>

 

The animation runs, but as you can see from the page, it tweens and scrolls down with the page, instead of staying fixed in the viewer as with the code pen.

 

I’m also wanting to make the background of the animation transparent, and have this animated text sit over the header image, as shown in the attached mock-up.

 

Again, not sure how to do this.

 

Thanks advance - or if you’re able to point me towards a more suitable forum, happy to try there!

 

 

Matt

Site-mockup.jpg

Link to comment
Share on other sites

Yeah, this forum is for GSAP-related questions and issues so you might not get much help here regarding issues like this, especially involving Scroll Magic (I don't think any of our regulars like using it). I did notice that the animation is setting position: fixed and also increasing the top value as the page is scrolled which is probably not what you want. 

 

Side note: it's better to use x and y than left and top for performance reasons.

Link to comment
Share on other sites

Understand that I'm trying it on, but you've been mega helpful.

 

13 minutes ago, ZachSaucier said:

I did notice that the animation is setting position: fixed and also increasing the top value as the page is scrolled which is probably not what you want. 

 

Side note: it's better to use x and y than left and top for performance reasons.

How would I go about correcting that?

 

 

Link to comment
Share on other sites

9 minutes ago, ZachSaucier said:

Either don't fix the elements or don't animate the top value :) 

OK have found the line you're referring to - I'm just not sure where to add the value change (which I'm guessing will be postion:relative). I tried adding it to the css styling in the code module (code block in my earlier post) to no affect.

 

No idea how to stop the top value from changing, as I'm simply pulling in the code from codepen into a visual builder block within Divi 🤷‍♂️

 

Conscious I'm trying to cut corners and need to go back to basics!

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