jpeacock

Well, I feel dumb. It was my flexbox setup allowing wrap on an overflow-x. ?

@ZachSaucier - thanks! - I updated the pen with the latest and it works. The weird thing is that I'm using it as an import in my React project and it doesn't work? import { gsap } from "gsap" import { ScrollToPlugin } from "gsap/ScrollToPlugin" gsap.registerPlugin(ScrollToPlugin)

I have a div nested in the DOM that is set to overflow-x: scroll. I can scroll it fine with a mouse/trackpad. When trying to animate it in React, it's not affected. No errors or anything, but it just doesn't go. I set it up with a ref and named the ref with React.CreateRef() and can console.log it out fine. I'm able to also animate other properties on this div correctly (I tried rotation, for instance). // up top import { ScrollToPlugin } from "gsap/ScrollToPlugin" gsap.registerPlugin(ScrollToPlugin) // in a class moveSlider = (distance) => { console.log(distance) this.animatedImageWrapperTween = gsap.to( this.animatedImageWrapper.current, 0.5, { scrollTo: { x: distance, offsetY: 40, }, ease: "power1.inOut", } ) console.log(this.animatedImageWrapper) // this logs correctly as a Reeact element and using .current brings up the HTML for the element }

I just edited the post above to show it. Basically, it's where I reference the setRefs function and the array is this.myRefs to access the children.

@andy1708 it's this package https://github.com/oyvindhermansen/react-images-loaded

Thanks everyone! I got it working by dynamically settings refs on each image. In the code above, I was thinking it had grabbed the children of the ImagesLoaded class, but it was null. I ended up setting refs on each image and pushing them into an array, then using that array as the elements to animate. I edited the code in the post above to point future seekers in the right direction.

I'm integrating this into a React project and am somewhat stuck. Getting the error: Cannot add property _gsap, object is not extensible I'm adding images into an ImagesLoaded component in this manner: (this is somewhat pseudo-code since I trimmed out a lot of other bits that weren't related) class Stage extends Component { constructor(props) { super(props) this.AuroraContainer = React.createRef() this.images = [] } componentDidMount() { this.animToFrame() } setRef = (ref) => { this.myRefs.push(ref) } animToFrame = () => { this.distance = this.getShortDistance( this.currFrame.i, this.nextFrame, this.myRefs ) if ( this.currFrame.i == this.distance + 1 || this.currFrame.i == this.distance - 1 || this.currFrame.i == this.distance ) { return } if (this.animation) { this.clearVals() } if (this.distance !== 0) { // this is where the error occurs this.animation = gsap.to(this.currFrame, { i: this.distance, modifiers: { i: gsap.utils.pipe( gsap.utils.snap(1), gsap.utils.wrap( 0, this.myRefs.length - 1 ) ), }, onStart: () => { console.log(this.distance) }, onUpdate: () => { const newFrame = this.currFrame.i gsap.set( this.myRefs[this.lastFrame], { visibility: "hidden", } ) gsap.set(this.myRefs[newFrame], { visibility: "visible", }) this.lastFrame = newFrame }, //onComplete: () => gsap.delayedCall(1, rotate360), ease: "power1.inOut", duration: 0.7, }) } } render() { this.images = [...Array(144).keys()].map((image, index) => { var file = `${image.toString().padStart(5, "0")}` return ( <img ref={this.setRef} key={`image_${index}`} src={`my-image-url.png`} className="rotator-image" /> ) }) return ( <div className="animatedImageWrapper"> <ImagesLoaded ref={this.AuroraContainer} > {this.images} </ImagesLoaded> </div> ) } Any idea as to where the error stems from?

Thanks! There are a lot of possibilities, for sure.

@ZachSaucier I did have a few questions about how the gs utils work as modifiers... I made a simplified pen with 4 buttons that would ideally take the animation to specific frames (it animates to that frame on first press, but the frames change with each press, which is not intended). Does wrap() shift the images array so that the destination is always at the end ([1,2,3,4,5] might become [4,5,1,2,3]) or does it work some other way? Is the modifiers plugin part of core gsap? I have console.log(lastFrame, newFrame); in onUpdate and each press calculates a different destination. https://codepen.io/jpeacock/pen/MWKrpRw

Wow, that's exactly what I was going for, even with the "shortest path" idea built into it. Thank you so much!

Hi all, I'm trying to figure out a way through this. I have a product that is photographed as a 360 degree image sequence. Using an older TimelineMax topic from the forum, I was able to build out a simple spinning image sequence. The images will be large, so a sprite approach seems to be out of the equation, so I'm going ahead with basic images. I'm looking to be able to target a destination image in the sequence, animate to that and ease into place, but my onComplete seems to not coincide with when the destination is reached (though, I think it's because it's actually called when the whole cycle is complete, not my midway destination image). Thoughts on how to approach this? Or, is there a more modern approach than the forum topic I found from 2014? https://codepen.io/jpeacock/pen/QWyaEzr

So, I switched them to dispose() and it seems to work as expected. It also got rid of the Type error. Turns out I had a little too much going on to begin with and had another area that was dependent on the loading of each loaders assets, so when cancel failed it took down another area. I updated and between that and dispose() it works great now. Thanks for the reply on it btw!

Hi, Just wondering what I may be doing incorrectly here. Lets say I start a loader and it has maxConnections set to 1, so it basically just works as a sequential loader (of images). What if, halfway through the loading, I want to basically stop that loader, clear it's contents and reinitialize it with new content? I thought I was doing it correctly by calling: myLoader.cancel() then to re-init, I just create it again: myLoader = new LoaderMax({all my params for this loader}) After I cancel, I also remove the images from the displayobject like so: while (_largeImageContainer.numChildren) _largeImageContainer.removeChildAt(0) If the loaders aren't complete, it doesn't kill the loaders in progress and I get a bunch of errors like so: TypeError: Error #1009: Cannot access a property or method of a null object reference. at Function/() at Function/() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.greensock.loading.core::LoaderCore/_passThroughEvent() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.greensock.loading.core::LoaderCore/_completeHandler() Plus, when I start the new loader, some of the old images get pushed into the new displayobject. Perhaps I'm not using cancel() in the proper way? Should I be using empty() or remove() instead? And if so, how?

Thanks for the info Jack. You'd almost think Adobe would have a reset functionality built-in perhaps. If you code on the timeline, you can just gotoAndPlay from frame 1 and effectively do the same thing if your code is on the timeline. Instead, if it's in a document class, guess there's no easy way. Anyway, thanks for the help and thanks for making some awesomely useful classes for us all!

I can't seem to find an easy way to do this and just wondering if I missed something... I have a main swf that I'm loading multiple child swf's into, then depending on the section of the project you're in, I just addChild/removeChild with Loadermax's getContent. Before removing any of the child swf's, I'm manually calling a transitionOut() -> destroy() method in the one that's currently on stage to clean up the listeners, remove dynamically generated objects, etc. There are a bunch of clips on the timeline's of these child swf's that I'll need to reset to their original positions/alpha's/etc and I was wondering if there was a way to just reinstantiate the swf instead of having to keep track of all the properties that changed with these stage movieclips? The closest thing I can think of is to just preload all the swf's with loadermax, then separately just load them again when I need them, giving me the ability to unloadAndStop on the child swf before unloading, but it kinda defeats the purpose of loading them all up front, right? Ideally, the reason to load up front is to make for seamless transitions between swf's...