Mattrudd

OK so I've answered my own question (html errors!) but it seems that the first 1st fade in the yellow section works fine (1 second delay, ease) but the 2nd and 3rd fades don't consistently show in the same way as the 1st fade (1 sec delay, ease) @GreenSock Any ideas why? Am I missing something from the I could simplify the fade code but I'm keen on having the onEnter callback function present to negate any viewport issues as solved in the 'Scrolltrigger fade-in elements' thread posted above by @ZachSaucier Perhaps I'm missing something from the onEnter bit? Thanks. Got the GSAP bug I think! https://codepen.io/matt-rudd/pen/ExXappw

Hi again - I've got my Lottie animation to work really well - thanks again for the help. I'm now wanting the common fade in/move up effect for text and images once they enter the viewport - rather than using CSS animations etc it would be better doing with Scrolltrigger too. Just like in this example: Thing is, I've read through the docs, the common mistakes and studied other examples, but I'm stuck as to how to get the fade-in to work alongside the existing Lottie animation. Thinking it's a case of missing a function somewhere. I don't need the yellow section to stick - just for the image and text to fade in/move up on entering the viewport. (Kept the id of the elements to 'box', same as example above, for ease) I know I'm trying to run before I can walk here, but got a very specific spec for this design ? https://codepen.io/matt-rudd/pen/ExXappw Thanks in advance, as ever!

Hey @Cassie - thanks yes - figured that, issue is definitely my end/explanations!

Hey thanks again - hmm your pen doesn't quite seem to be working for me... Initially got an 'Uncaught TypeError: Cannot read property 'end' of undefined' line 43... on refresh that went but pin spacing etc is all off now, must be my browser? Exactly this - as seen here, expanding on your help/pen from Friday: https://matt-rudd.com/240418-2/ This is essentially a business landing page with portfolio-style sections, so each of the Lottie elements will serve as a different section title in the end using the same custom-animated typeface seen above. Apologies for the confusion there! Hope that's clearer. It's working well on desktop, just need to reposition and scale down the titles and crucially get the ScrollTrigger bits working responsively. Noticed you've stripped out the getElementById parameters from the top, and replaced with a 'self' function - that looks neat! Hoping that works with my theme builder but may well end up replacing the start and end functions with keywords or percentages. Will get learning about that function and the getbyId etc.

Hi again @GreenSock , a further follow-on question if you'd be so kind again! I thought I was good to go - after much head scratching worked how to reverse-engineer all the code using DIVI (which conveniently allows for CSS and JS to connect with the visual 'div' builder). What I'm struggling with this time is I need to have different instances of ScrollTrigger for desktop and mobile. I need a responsive page, but as I'm using columns, the flex for mobile throws out the container heights, which of course messes up my pin/trigger locations. I've gone through the ScrollTrigger.matchMedia() docs, and applied the example code as best as I could at this relatively early stage in my coding career! I'm stuck with how to fix the Syntax error - but also: Is it possible to reapply the offsetHeight function as part of the matchMedia method? Could you take a quick look at my code efforts below and tell me where I've gone wrong, syntax error and beyond? Tried to use some intuition about where the LottieScroller function at the end of the original Codepen (above) should sit, and figured this was an "all" function. Left the refresh at the end as I'll likely have other ScrollTriggers on the page. https://codepen.io/matt-rudd/pen/yLXLzVW A valiant more than laughable effort hopefully - really enjoying this crash course! Many thanks again!

Ah bless you dude! Managed to get it working really well with that missing function. The only remaining issue was some white space created by the header above the first block - sure this is room the pinned scroll requires, so I simply added a negative margin to the header to fix. Really grateful to you!

Hey Jack, thanks loads for your response! Fully understand the bulk of this is an off-topic Wordpress/Divi issue - so I'll seek out help there. The reason I need to use more than one container is that I need to show different images and text alongside each animation in turn - static in the container, fixed so that they scroll up with the container once it's unpinned (after completion of animation) So in my example below, there'd be different text/images in the black container next to the animated text (title 1) then same for orange container, and for green. I noticed the final green box (#title3) doesn't pin, and animates with the box above - is there a fix for this? Thanks! https://codepen.io/matt-rudd/pen/ExmBpXr

Hi there. Wonder if any kind soul can help. I'm in the process of getting to grips with Javascript and GSAP - so apologies in advance if my terminology and attempts at coding below are annoyingly bad! Thanks in advance for your patience. What I'm trying to achieve is: Pin a block on scroll (pinned to centre of screen) Scrub through the lottie animation (JSON file) inside this pinned block with scroll Unpin the container block once the animation has finished I then want to repeat this process for the next container block, but with a different animation. The closest working example to this I've found is at the bottom of this post (I want a version without the pink gaps between pinned blocks!) https://codepen.io/akapowl/pen/96ec6e6dadf7b73d11e38cda125d8920 Here's my attempt at applying this code to my page (a complicating factor is I've using the Divi them builder in Wordpress!) <removed> What I'd like to do is remove the white and dark grey space above and below the pinned container (the yellow lines indicate where the unwanted gap is!) then reset the scrolltrigger so that the next block behaves in the same way... block 1 pins > animation 1 scroll-scrubs > block 1 unpins and scrolls up > block 2 scrolls up and pins > animation 2 scroll-scrubs > block 2 unpins and scrolls up etc. etc. I know I need to change the pin, start and end values in the JS, as well as resetting the Scrolltrigger for each animation, but I'm not sure how to go about this in relation to my Divi classes and IDs, and the vh values set for each block. Hope that all makes sense... I'll continue to read the Docs here and learn, but in the meantime any help/nudges in the right direction would be amazing!

I've looked into making the sizing responsive and the closest demo to what I'd like to achieve so far is this: https://codepen.io/matt-rudd/pen/poydNPO Except on sizing the window, the div with the animation jumps - I want this to stay central. With the Scrollmagic version I made, the JS referenced a scene and I could then set the VH on that to affect the animation. .scene { height: 100vh; width: 100%; position: relative; text-align: center; I've a feeling I'm seeking help in the wrong place again - as this is clearly a CSS lack of knowledge and not GSAP! So I think I need to go away and learn about viewports properly.

A couple of final fixes I could use some help on... scaling the design for devices. When I add a main container and set that to scale by percentage, the animation doesn't scroll properly. I know I need to reference the parent in the JS but not sure how? I've researched this the best I can - found reference to _gsTransform but not sure how to implement. I'd also like the tween to happen quicker (with less scrolling down) on mobile compared to desktop. Thanks in advance for your help and patience - I'm learning more about CSS/JS/GSAP as I go here!

Hi Zach, thanks so much for your quick reply. I've since found an alternative example and worked out how to tweak the parameters to fit my particular sprite sheet. https://codepen.io/matt-rudd/pen/WNwZzWr I cobbled a Scrollmagic version of this (that I've posted before about!) but the div shifted position at the end of the pins - which I think was a known bug. Looking forward to implementing this ScrollTrigger version, and learning more about what it can do as I go! All's left now is to the animation working in reverse with a scroll-up... any pointers there will be appreciated, but as I said earlier, I'm fully aware of my need to work patiently through the thorough documentation! Seems to now be working in reverse - it didn't initially! Thanks again.

@GreenSock Hi - I’ve struggled previously with ScrollMagic so am excited to see how ScrollTrigger works better for me! Can anyone offer me guidance about running the same type of static scroll animation using a different spritesheet to the coffee drinker above - with a different sizing and number of frames? I promise I am working through the documentation, but keen on a quick fix for a current project ? Thanks!

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!

Understand that I'm trying it on, but you've been mega helpful. How would I go about correcting that?

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

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.

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.

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.

Thanks again Zach! Is there a virtual way I can buy you a pint? ?

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. https://codepen.io/matt-rudd/pen/oNXYPbZ#code-area 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!

Thanks again Zach for helping to narrow my focus.

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

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

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)