Jamesh

I have a portfolio which can be filtered. The animation I have is a reveal which works fine when viewing all the items (and using the filter), as ScrollTrigger is able to work out the position of each of the items. However, when the items are filtered, and one of the items which has not come into the viewport is activated, the transition fails to trigger. I'm assuming that this is because ScrollTrigger has already assigned its position in the initially loaded page. Is there a way of refreshing the position of an element after it has been filtered? I have tried onRefresh but have failed so far. Thanks James

Excellent. Thank you....

Loving ScrollTrigger. I've got the functionality of what I want to do working, codepen URL https://codepen.io/jame5/pen/YzwzdpP. However, I am using IDs to trigger and another ID to toggleClass by using toggleClass: { targets: timelineImage, className: 'active' },. I have a lot of images, 38, and I'm sure there is a better way in which to target the elements rather than having to specifically generate code each time for each image and section and therefore generating essentially repetitive code, as well as making making it more dynamic for future use. I started working along the lines of: if (document.querySelector('.timeline')) { const timelineContainers = document.querySelectorAll('.timeline-content'); timelineContainers.forEach((container) => { const timelineTrigger = container.querySelectorAll('.timeline-trigger'); const timelineImage = document.querySelectorAll('.timeline-image'); ScrollTrigger.create({ trigger: timelineTrigger, markers: true, toggleClass: { targets: timelineImage, className: 'active' }, start: 'top 40%', }); }); } but this obviously adds the className to all the .timeline-images and not one-by-one as you scroll past each .timeline-content, hence my workings thus far. Thanks in advance! PS. Is it best practice not to animate the same element as your ScrollTrigger?

All sorted. Thanks for your pointers and help. ?

Hi Zach. Thanks for coming back to me and completely understand that you can't answer everything (and writing things like 'I cant get it to work at all!' isn't hugely insightful!!). My question would be how to implement PointC's codepen to work with GSAP3 and vanilla JS. Hi Craig. Thank you also for coming back to me and for the inspiration to make animations like your bubble tabs in the codepen. So as you pointed out I think I was struggling with converting to GSAP3. I managed to get pretty far but was failing to implement the targets.index = i; so the console was giving a warning regarding if(this.index != activeTab) { and activeTab = this.index; which I understand is not GSAP per se. I was just wondering how I would implement the bubble tabs in the codepen I supplied?!

Back again! I've now been trying to add an effect like shown here https://codepen.io/PointC/pen/zJVmMd but I can't get it to work at all! A long shot but if there's any chance you could throw a little more light on how to go about that would be brilliant. My current codepen is here: https://codepen.io/jame5/pen/RwWBPGd Thanks in advance.

Thank you for taking the time to run through your thoughts and clearly laying out how you would tackle the task. Really really helpful and very much appreciated.

Hoping someone might be able to help a rookie question! I've enclosed a codepen to illustrate the tabs I have working with GSAP and JS. Everthing is working fine but I'd like the make it possible to not have the animation play when the tab and tab content that have the dynamically added 'active' class to them. Essentially, if a tab is active then when you click on it, it shouldn't animate, otherwise any other tab, if clicked on and is not currently active, should animate. Hope that makes sense!? Thanks in advance.

I can try but I'm certainly no expert! Have you tried removing the animation.gsap.js plugin? I have stopped using it and my animations work no problem.

Have a look here...

import gsap from 'gsap'; import ScrollMagic from 'scrollmagic'; import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; Then when referencing do something like the following (note the use of gsap rather than TweenMax): document.querySelector('#swup').style.opacity = 0; gsap.to(document.querySelector('#swup'), 0.5, { opacity: 1, }); rather than document.querySelector('#yourid').style.opacity = 0; TweenMax.to(document.querySelector('#yourid'), 0.5, { opacity: 1, }); Does that help?!

Thanks for the headsup. I worked out that I wasn't wrapping the ease correctly. ease: power4.inOut should have been ease: 'power4.inOut' . Always the small things!

For anyone interested... The solution I came across that doesn't require you to alter your webpack.config.js file and actually works for me can be found here: https://github.com/janpaepke/ScrollMagic/issues/665 The gist of it is to make sure you have ScrollMagic and GSAP added via npm (hopefully that's obvious) as well as imports-loader: npm install --save scrollmagic gsap npm install --save-dev imports-loader Then in the file you want to use ScrollMagic with GSAP do the following imports: import { TimelineMax, TweenMax, Linear } from 'gsap'; import ScrollMagic from 'scrollmagic'; import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/dubug.addindicators'; Using Webpack 4.x and imports-loader 0.8.0

Thanks for this. I have it working in part and have found I have to manually import the easing functions for some reason, so import { gsap, Power4 } from 'gsap'; I'd like to add.indicators but cant seem to get this functionality to work, does anyone have any ideas? Thanks