jrhager84

I'm going to be going through and taking away all of the bloated js calls *after* I create the actual content. That's just standard whatever loads with WP/X Theme. I'm sure there's *crazy* redundancy, and I don't even have slider Revolution/The Grid on the page right now, so the 800 calls to those will go away as well.

I totally understand about 'assuming' GSAP loads because of the rarity. I may scrap that part, but my idea was just to iterate over the elements from the gsap/IntersectionObserver array and set their opacity to 0 on DOMContentLoaded so they're opacity one unless the GSAP/IntersectionObserver logic fires. Then, it'll set their states before a FOUC, but if for some reason GSAP/IO logic fails, they'll still be opaque. If that makes sense. I think I copied it from a different source, as I definitely changed them all to fromTo(). Somewhere else I was told to use [].forEach, so I can easily just change that out for more conformity. I moved the stagger, so I think I copied prematurely or got mixed up. Ugh. I'm a dingus. Thanks again for all the help!

I forgot to add: I was trying to workshop a way to 'hide' the sliding animations without setting their default opacity to 0, so that way if for whatever reason GSAP didn't load or there was an issue, it wouldn't essentially be a blank page. Are there any links to resources that would aide me in achieving that effect? I wanted the animations to happen farther up the screen, but with opacity 1 and default position, they 'pop' out of existence and then animate in, which is not a very desirable effect. hahaha Here's my updated code. If anybody has a free moment to criticize it for efficiency/errors, I'd be greatly appreciative. No worries otherwise. document.addEventListener("DOMContentLoaded", function() { const elements = document.querySelectorAll('[data-animationtype]'); const animationObj = { slideUp: { opacity: 0, y: "5vh", stagger: 0.12 }, slideLeft: { opacity: 0, x: "10vw", stagger: 0.1 }, slideRight: { opacity: 0, x: "-10vw", stagger: 0.1 }, opacity: { opacity: 0 }, originalPos: { opacity: 1, x: 0, y: 0, duration: 0.5 } } const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { animator(entry.target); } }); }); elements.forEach((el) => { observer.observe(el); }); function animator(element) { var targets = []; var animation = element.dataset.animationtype; if (element.dataset.animatechildren == "true") { console.log("Children true"); [].forEach.call(element.children, (el) => { if ((el.dataset.animationtype == "")) { el.dataset.animationtype = animation; } targets.push(el); }); } else { targets = element; } console.log(targets); // Where we dispatch animations var timeLine = gsap.timeline(); switch (animation) { case "slide-up": { timeLine.fromTo(targets, animationObj.slideUp, animationObj.originalPos); } break; case "slide-left": { timeLine.from(targets, animationObj.slideLeft, animationObj.originalPos); } break; case "slide-right": { timeLine.from(targets, animationObj.slideRight, animationObj.originalPos); } break; } } });

That's what I was thinking. If I specify the to() being 0,0 essentially, it shouldn't affect the end position, and should clear this up, yes? I appreciate it. I'm trying to learn more about conditional from and to objects, so I can build a helper function that assembles any given animation based on some values, making my little mini-engine very extensible and robust. Re: your solution -- That's what I was thinking after some research. I appreciate the help!

I must be doing something wrong. After expanding all of the collapsed <div>s in the dev tools, I've come to find out that certain elements are animating simultaneously while each one is in/out of frame. They should be being observed separately. I just don't know where my mistake is. ?

It's an X-Pro site theme, so all of the stuff is there, and there shouldn't be anything getting in the way. There are many people using GSAP with X theme with no issues. Very curious.

The crazy part is there are *no* errors. So it really doesn't make sense. All of the animations are triggering, it's just sometimes the start/end values are left at some mid-point.

I'm not sure if I'm doing something wrong, but my CodePen version of this works perfectly, but when I implement it into my WordPress installation, it seems to 'pause' half-way through animations about 50% of the time. Essentially, I have data-attributes on elements for both animation type, as well as whether or not to grab and animated child components. Here is the code. Maybe I'm doing something wrong? The site I'm working on that has the issues is https://yourgalfriday.nyc document.addEventListener("DOMContentLoaded", function() { const elements = document.querySelectorAll('[data-animationtype]'); const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { animator(entry.target); } }); }); elements.forEach((el) => { observer.observe(el); }, { threshold: 1 }); function animator(element) { var targets = []; var animation = element.dataset.animationtype; if (element.dataset.animatechildren != undefined) { [].forEach.call(element.children, (el) => { if ((el.dataset.animationtype = "")) { el.dataset.animationtype = animation; } targets.push(el); }); } else { targets = element; } // Where we dispatch animations var timeLine = gsap.timeline(); switch (animation) { case "slide-up": { timeLine.from(targets, { opacity: 0, y: "5vh", duration: 0.5, stagger: 0.12 }); } break; case "slide-left": { timeLine.from(targets, { opacity: 0, x: "10vw", duration: 0.5, stagger: 0.1 }); } break; case "slide-right": { timeLine.from(targets, { opacity: 0, x: "-10vw", duration: 0.5, stagger: 0.1 }); } break; } } });

I see. I thought I understood it. Just wanted to make sure. I appreciate you taking the time to explain it in more than one way!

I don't have it set up yet. Just so I understand you. Are both code examples you gave the same? Or if I'm creating a timeline a should push and then fire? Just making sure I understand you correctly. Thanks!

so 'tl' would contain the base animation, and invoking .from() afterwards would be chaining it?

I have a <div> that has data attributes of animationType and animateChildren. I'm trying to conditionally set animation timelines based on the values of those properties. I have it set via switch statement, and I'm essentially trying to either store the command in a variable, append to it, and fire after the case is evaluated, *or* have the conditional chaining happen in the switch case that has 'animateChildren' attribute. Is there a way to conditionally *add* .from() animations to the end of a timeline based on an if statement? Let's say (with this pseudo-code): gsap.timeine().from(the code here) if (some condition == false) { .from(code1) } if (another condition == true) { .from(code2) }; intended results based on above conditions: gsap.timeline().from(main code).from(code2); Hopefully that makes sense. Thanks!

Oh my, that's amazing news!

I took a look, and it seems the Intersection Observers are what I'm looking for. I really do appreciate the help! Is there a timeline for the scroll addition to GSAP? Weeks? Months? I'm building a website, and just want to do a bit of 'forward-thinking' to incorporate that in the future. You guys rock!

What is the timeframe for that? Days? Weeks? Months?

So, the examples on the front page are using intersection observers? Or ScrollMagic? I just want fade-in animations to fire when the containers enter the screen, so that way I can animate sections when a user scrolls through the page. Which way is the easiest to set up? Thanks again!

I'm just not sure if I still need Scrollmagic, as I haven't used GSAP in a really long time, and it seems (at least by looking) that you don't need SM to have simple .from() animations that say fade in a div from the left and from opacity 0 to 1 (like on the homepage elements as you scroll down). I'm setting up my dependencies, and just want to wrap my head around how to do it currently. Thanks in advance, and I apologize for my ignorance!