en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en de en en en en en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en de en fr en en en en en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
React - animating scrollLeft on a div
jpeacock posted a topic in GSAP
360 image sequence (not sprites), easing in chosen image
jpeacock replied to jpeacock's topic in GSAP
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.
jpeacock replied to jpeacock's topic in GSAP
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.
360 image sequence (not sprites), easing in chosen image
jpeacock replied to jpeacock's topic in GSAP
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 (   ) }) return (     {this.images}     ) } Any idea as to where the error stems from?
360 image sequence (not sprites), easing in chosen image
jpeacock replied to jpeacock's topic in GSAP
Thanks! There are a lot of possibilities, for sure.
360 image sequence (not sprites), easing in chosen image
jpeacock replied to jpeacock's topic in GSAP
@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
360 image sequence (not sprites), easing in chosen image
jpeacock replied to jpeacock's topic in GSAP
Wow, that's exactly what I was going for, even with the "shortest path" idea built into it. Thank you so much!
360 image sequence (not sprites), easing in chosen image
jpeacock posted a topic in GSAP
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
Loadermax cancel all loaders in progress?
jpeacock replied to jpeacock's topic in Loading (Flash)
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!
Loadermax cancel all loaders in progress?
jpeacock posted a topic in Loading (Flash)
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?
Reset loaded swf after use?
jpeacock replied to jpeacock's topic in Loading (Flash)
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!
Reset loaded swf after use?
jpeacock posted a topic in Loading (Flash)
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...
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“Without GSAP I would have ditched front-end dev the day Flash officially died.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“@greensock is just pure awesomeness. What more can be said?”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.