NickWoodward

Oh.... I know what it must be. I've used CSS for parallax. So I've a container div with an extra scrollbar in it that I've hidden (which is what I'm trying to eventually replace with gsap!), so in effect the window itself isn't scrolling (I think, it's been a while since I looked at it!)

Hi Jack, I got there eventually ? Yeah, I wish I could! But the problem is the code works fine in codepen, which is kind of the reason I'm scratching my head Any idea on what other steps I could take to troubleshoot it other than the "trusty" console.log? I know it's difficult to do blind, but I'm not sure what I can do. I can't think of why simply removing scrollTrigger: ".about__title" would make any difference, but I guess my next step is putting the code in the main js file ?‍♂️ *good to know I haven't made an obvious error though!

? So I'm trying to play around with scroll trigger in a project, and I'm exporting a test function which works fine: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; // Register ScrollTrigger gsap.registerPlugin(ScrollTrigger); export const test = () => { console.log(ScrollTrigger); gsap.from('.about__title', { duration: 3, x: '-500px', ease: 'linear' }); } But when I add scroll trigger to the animation: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; // Register ScrollTrigger gsap.registerPlugin(ScrollTrigger); export const test = () => { console.log(ScrollTrigger); gsap.from('.about__title', { duration: 3, x: '-500px', ease: 'linear', scrollTrigger:'.about__title' }); } It doesn't work at all ?‍♂️ The output of the console log makes me think I've imported it correctly: ƒ ScrollTrigger(vars, animation) { _coreInitted || ScrollTrigger.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)"); this.init(vars, animation); } but I've obviously made a mistake somewhere, was hoping someone could help me spot my mistake please? Thanks, Nick

const renderJob = ({title, wage, location, description}, element, batchNum) => { console.log(batchNum); const markup = `<div class="job-card job-card-${batchNum}"> <h3 class="job-card__title">${title}</h3> <div class="job-card__content"> <div class="job-card__wage">${wage}</div> <div class="job-card__location">${location}</div> <div class="job-card__description">${description}</div> </div> <div class="job-card__footer"> <button class="job-card__view-btn">View</button> </div> </div>`; element.insertAdjacentHTML('beforeend', markup); } tl.from(`.job-card-${batchNum}`, { opacity: 0, transformOrigin: "50% 50%", stagger:0.23, ease: 'ease-out'}) JobListView.renderJobs(jobs, elements.jobsDisplay, this.searchOptions.index); JobListView.animateJobs(this.searchOptions.index); So naming the elements based on when they're added (batchNum) worked, in case this help anyone else? Would be interested in knowing if there was a better way of doing it though

So I've got my card animations working I've got a function to render a card element: const renderJob = ({title, wage, location, description}, element) => { const markup = `<div class="job-card"> <h3 class="job-card__title">${title}</h3> <div class="job-card__content"> <div class="job-card__wage">${wage}</div> <div class="job-card__location">${location}</div> <div class="job-card__description">${description}</div> </div> <div class="job-card__footer"> <button class="job-card__view-btn">View</button> </div> </div>`; element.insertAdjacentHTML('beforeend', markup); } And a timeline which animates it: var tl = gsap.timeline({defaults: {opacity: 0, ease: 'back'}}); export const animateJobs = () => { tl.from('.job-card', { opacity: 0, transformOrigin: "50% 50%", stagger:0.2, ease: 'ease-out'}); } But... When I get to the bottom of the page my code checks if there are any more elements left to be added, and adds them to the screen if they exist (infinite scroll). But because the older job-cards and the newly added job-cards have the same class name, gsap obviously animates all the cards again, rather than just the new ones that have been added. This leaves me with a blank screen as the elements animate in from the top... Any advice on how to animate just the newly added elements? I know it's hard to help without a codepen, but I'm using a database and it'll probably take me forever to work out how to replicate it - I was hoping it was a problem someone had come across before and potentially had more general advice? No worries if not! Thanks, Nick *So far I've tried creating a new timeline each time render is called, but that obviously doesn't work, and I'm now looking into trying to name the elements differently based on when they're added, but haven't got my head round it yet....

Fair enough, thanks

I'll re-write my original post once I work this out - how can I exit code snippets *below* the snippet itself? *Edit: It only happens if you paste code in and it's automatically recognised and formatted as code: I literally can't click below this (and that's literally not the formatting I'm seeing): elements.jobsMenu.addEventListener("click", (e) => { jobsMenuView.toggleMenu(e); });

Well that took a while ? I pretty much re-learnt webpack & webpack-dev-server, convinced they were the problem. Then ripped down my project bit by bit and rebuilt it. It was only when I omitted the styling that I realised... I scroll a custom parallax div, not the window. I'm an idiot. gsap.to('.header', { duration: 1, backgroundColor: "red", scrollTrigger: { scroller: '.scrollWrapper', trigger: '.header', start: 1, end: 9999, toggleActions: "play none none reverse", onUpdate: function() { console.log('hello'); } } }); ... sometimes I hate coding ? **edit - still getting odd behaviour, but I'm really not digging into it given my parallax solution. Took me long enough to get it working reliably across chrome and FF. Another use for scrollTrigger!

I've so far not been able to, other than webpack and the use of imports the code is identical to the OP codepen. Wasn't entirely sure how to emulate that in an online code sandbox, but I'll look into it. I'm also trying to make a cut down example on my local machine, hopefully that will help me narrow the problem down.

Noted! ? Moving onUpdate still isn't calling the function or changing the element properties unfortunately ?‍♂️ If I comment out the whole scrollTrigger block it inserts `background-color: red` inline (ie the animation works). If I uncomment it and the element has no background-color defined in the css, it adds `background-color: rgba(0,0,0,0)` inline and onUpdate doesn't fire If the element previously has a background-color in the css it adds that color inline, and again onUpdate doesn't fire

Hello again! Having gone back and learnt css animations more thoroughly I decided to use GSAP anyway ? I'm just having a problem getting ScrollTrigger to work in my build - it works fine in the codepen above and in a simple html/css/js file using the recommended CDN, but not in my current project using imports Here's the code: import { elements } from './base'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export const animateHeader = () => { gsap.to(elements.header, { duration: 1, backgroundColor: "red", scrollTrigger: { trigger: elements.header, start: 1, end: 9999, toggleActions: "play none none reverse" }, onUpdate: function() { console.log('hello'); } }); } If I remove the `scrollTrigger` block the animation works and the callback fires. With the scrollTrigger block present it alters the header element, but only by adding the current color as an inline style, and the callback isn't fired. Have I missed something obvious? I'm using webpack, and have tried with and without web-dev-server and it doesn't seem to make any difference. I'm increasingly thinking that it isn't the problem. ScrollTrigger is appearing in the final bundle, so I assume that means there's no tree-shaking taking place. I'm just a bit stumped! ? Nick

Nice, I wouldn't have considered that, thanks!

Thanks for the help, think it's best to brush up on css animations and then come back to gsap!

Yeah, pretty much a tongue in cheek way of saying that! What I meant to say was, especially RE hardware acceleration and compatibility, is that animation isn't really a strong point of mine (yet?) and I didn't want to forget or miss what seem to be a variety of pitfalls - using gsap seemed a good way to do that? But like you said, maybe I should just be solid with both. I thought there were several properties that it wasn't performant to animate, and that gsap was just applying transforms to the properties I changed? Or do I have to be wary of the properties I change in gsap too? Sorry I'm pretty new to animation in general. Yeah, that's what I was initially doing, but then I realised I was adding a class that altered the height of the header when I think I should have been scaling it(?). I've some basic understanding of css animation, but yeah, I've got a course by Rachel Nabors on css motion design that I'm planning to watch - wanting to learn more about SVGs I watched Sarah Drasner's course first. Probably the wrong way around looking at it now I think for the time being then I'll stick to simple css animations for the menu, and use gsap for animating the navbar that staggers in, and some of the stagger effects on .card elements Sorry for the rambling, helpful to lay it out though ?

Thanks Zach, Not to question the wisdom of using scrollTrigger - having seen what little I have of gsap I have no doubt it's the way to do it - but I'm going to be going to interviews soon and like to be able to justify use of plugins etc. My reasoning for gsap is - I'm not good with animation and want all the hardware acceleration, cross browser compatibility and considerations of which property I should or shouldn't animate to be dealt for me (I'm right about that last one, right? ?) Is the same reasoning broadly true of scrollTrigger? I just don't want to be hit with a 'why use a plugin for a simple header effect' question and not have a solid answer ? Good to know about Firefox, will use fromTo. Anyway, I better start looking at scrollTrigger. Much appreciated! Nick

* the reversed timeline going to the wrong background color seems like it might be a bug in firefox ? It works fine in the chrome codepen and on my site, but the behaviour is different in firefox on both

Was just looking for a little bit of advice if anyone can take a look please. My code for playing and reversing an animation that changes the background color of a header when scrolling just seems overly complicated: if(scrollTop > 0) { if(tl.reversed()) { tl.reverse(); tl.play(); } else { tl.play(); } } else { tl.reverse(); } Is there a better way to write this? Yeah it works, but I'd like to look like I know what I'm doing ? Also, if you look at the codepen, I'm a bit surprised that the animation reverses not to the original background color of grey, but of a transparent white `rgba(0,0,0,0)` - I thought I didn't have to set the defaults in gsap? Thanks!

Yeah she really is, her passion for it makes a big difference. Took a while to get to the live coding side of things - which she says she hates - but I think it's really good so far. To be fair FEM has been really good in general (short of one course), so I'm not surprised at all

Yeah I had thought the code was a bit redundant, but I lifted it from an answer to a question similar to mine so had just blindly deferred to their knowledge - thanks for setting me straight though! Currently learning from Sarah Drasner's FEM svg course, it must be a year or so old - things move fast ?. I might finish the course and then go through the links on the new syntax. Having to rewrite and understand will probably help me learn Anyway, thanks again! Nick

I've kind of solved it. It seems to be related to using Live Server from VSCode. If I open the page from Explorer there's no problem at all. If I load the html in LiveServer that's when the problem happens. Does anyone know why?

Hello! First time posting, and about second hour working on GSAP! Enjoying what little I've tried so far, but I'm struggling with the following animation if someone doesn't mind having a quick check please? It's basically displaying about 10% of the animation, despite me trying to wait for the DOM and window to fully load, and to wait for the next animation frame. Perhaps I'm missing something obvious (the code works in the code pen) Thanks! Nick function animateBoxes() { var tl = new TimelineMax(), box = document.querySelectorAll(".box"); TweenMax.to(box, 1, { y: 200, }); } document.addEventListener("DOMContentLoaded", function (event) { window.onload = function () { window.requestAnimationFrame(animateBoxes); }; }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <div class="box-example"> <div class="newbox"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script> <script src="liveCode.js"></script> </body> </html> .box-example { position: relative; display: flex; justify-content: space-evenly; align-items: center; width: 100%; height: 20rem; padding: 0 10rem; background: teal; } .newbox { width: 5rem; height: 5rem; background: red; } .box { width: 5rem; height: 5rem; background: darkblue; }