Mattrudd Posted February 20, 2020 Share Posted February 20, 2020 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 More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 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. 4 Link to comment Share on other sites More sharing options...
Mattrudd Posted February 20, 2020 Author Share Posted February 20, 2020 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 More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 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). 1 Link to comment Share on other sites More sharing options...
mikel Posted February 20, 2020 Share Posted February 20, 2020 1 hour ago, ZachSaucier said: perhaps overlaying the text with black and animating those black parts to reveal the text) Good idea ... See the Pen JjdRBMY by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Mattrudd Posted February 20, 2020 Author Share Posted February 20, 2020 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 More sharing options...
Mattrudd Posted February 20, 2020 Author Share Posted February 20, 2020 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 More sharing options...
elegantseagulls Posted February 20, 2020 Share Posted February 20, 2020 The other option would be to roll this into a canvas/webGL animation, where you can still use gsap for control, and can use dynamic text (like from a cms), and don't have filters crushing paint performance in Safari. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 @elegantseagulls I think that's a bit beyond his scope of programming ability at the moment Link to comment Share on other sites More sharing options...
mikel Posted February 20, 2020 Share Posted February 20, 2020 You can play really well with SVGs. See the Pen oNXzQQB by mikeK (@mikeK) on CodePen Happy playing ... Mikel 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 20, 2020 Share Posted February 20, 2020 42 minutes ago, ZachSaucier said: @elegantseagulls I think that's a bit beyond his scope of programming ability at the moment Ah yes, I'm on the go, and missed the n00b part! Sprite is the way to go! Here's some info on using a sprite image for animation: 2 Link to comment Share on other sites More sharing options...
Mattrudd Posted February 22, 2020 Author Share Posted February 22, 2020 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 More sharing options...
ZachSaucier Posted February 22, 2020 Share Posted February 22, 2020 You need to change the duration and the offset: See the Pen BaNQOXg?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted February 22, 2020 Author Share Posted February 22, 2020 Thanks again Zach! Is there a virtual way I can buy you a pint? 😊 Link to comment Share on other sites More sharing options...
Mattrudd Posted February 22, 2020 Author Share Posted February 22, 2020 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 More sharing options...
ZachSaucier Posted February 22, 2020 Share Posted February 22, 2020 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 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted February 22, 2020 Author Share Posted February 22, 2020 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 More sharing options...
ZachSaucier Posted February 22, 2020 Share Posted February 22, 2020 You could just export a bigger size from AE? Link to comment Share on other sites More sharing options...
Mattrudd Posted February 22, 2020 Author Share Posted February 22, 2020 Sure, I guess I'm just conscious of file size. The sprite sheet as it is comes in at 394k, after some heavy-duty compression. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 22, 2020 Share Posted February 22, 2020 I didn't check (I'm on mobile now), but make sure you're only spriting the parts that change, not the extra space around it. But yes, large PNGs are generally a bigger file size and something to keep in mind Link to comment Share on other sites More sharing options...
Mattrudd Posted February 27, 2020 Author Share Posted February 27, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 27, 2020 Share Posted February 27, 2020 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 More sharing options...
Mattrudd Posted February 27, 2020 Author Share Posted February 27, 2020 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 More sharing options...
ZachSaucier Posted February 27, 2020 Share Posted February 27, 2020 1 minute ago, Mattrudd said: How would I go about correcting that? Either don't fix the elements or don't animate the top value Link to comment Share on other sites More sharing options...
Mattrudd Posted February 27, 2020 Author Share Posted February 27, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now