MemeMaker

Never heard of Phaser, thank you. I really like that they have tons of code examples to explore. Now if only WebKit would die with Flash I could live a very happy life. Edit: This is pretty close just from the examples: https://phaser.io/examples/v2/audio/audio-sprite

I made a fun "political click adventure" (Hint: You never escape to Canada.) for the 2016 election with my wife (She did most of it, I did the sounds, some code, and QA) in Adobe Edge Animate, but unfortunately Adobe deprecated the project. If you aren't familiar, Adobe Edge Animate was basically flash for HTML5 mixed with symbols and JS based code. The problems were rife with this project, but the concept was gold. It made affiliate revenue from the products advertised. The problem was that it absolutely sucked on mobile. iOS had at the time a 10,000px sprite width limit, and most mobile browsers loaded a maximum of 10 sound sprites. Even some desktop browsers now don't render the timed sounds correctly (the Sarah Palin sprite seems to never have correctly timed sound). I never solved these issues. The other main issue was fractional pixels rendered differently in different browsers and sprites being jittery. I forget how I solved it, but it was annoying. I am exploring the possibilities now of click adventures with cryptocurrency, and would love to be able to get something close to this. I just don't know what design pattern I need for such a large animation. There is a lot going on in it. My questions are: Where do I begin in porting this to GSAP? Does anyone here have a similar project to share? Is anyone here a refugee from Adobe Edge Animate?

Took me about 20 minutes to figure it out when I had time. It's dead simple. Of course writing things from the beginning for a constructor is best. I have a bad habit of making everything an ID when I'm donking around on the frontend. Now I've learned about nth child selectors and other things for scaling. The following is by no means good code, but I accomplished the basic goal of just instantiating new players. I changed everything to classes and passed though a hardcoded ID. I know it gets more complex, but I get it now. I can get rid of the hardcoding with jQuery and/or getters for a database of the sprite sheets so I'm not manually pasting URLs all day etc...

Thank you. Game on! I'm just trying to get better at JS and GSAP so I can help my wife out with her art/animations. No real time frame. I like to wakeup each day with a small problem to solve. I get logic, but my current JS strategy is like playing golf with just a sandwedge. Sure, you can finish the game, but it will be slow, nonsensical, and excruciating. All of this ES6 stuff with arrow functions breaks my brain.

I want to instantiate multiple instances of a GSAP player (as in the attached codepen) work on a single web page, but without loading multiple scripts for each player. I'm struggling to conceptualize what I need to do. Should I rewrite this function as a constructor? If so, are there GSAP examples of this? Is this where reactive frameworks shine? I just want to make something simple with bootstrap if possible.

This doesn't seem to work because mouseenter is constantly updating while you are in the image. It tweens nicely at the beginning, but then interferes. If you compromise and disable the listener after the first tween, then it just loops and stands still. ? I think the best approach is relative mouse movements considering the current sprite position, but that seems like it would need a rewrite, and GSAP might not be the best solution for this problem. I haven't come across anything similar besides the gifctrl project. I think I'm going to settle for the jumpiness for now. It works well enough.

I am using Draggable to allow users to scrub through a spritesheet, but I am also using TweenMax.to automatically play the tween of the spritesheet going back and forth during this. Sahil provided a solution in an earlier version of this project, but his method of using the TweenMax.ticker object fails for me, and breaks everything when I try to combine Draggable and TweenMax.to functionalities. What I want to have happen is the cursor/touch position be relative to the current frame playing on the tween so things don't jump around when a user attempts to manually scrub the sprite. Is this possible using the ticker? Maybe there is a better approach? In my codepen I have commented out the ticker portion. No matter what I've tried something has gone wrong.

Yay, I finally got the behavior I wanted finally on touch and mobile! The only issue is that when you enter the the image, it jumps to the position of your cursor (or finger touch coordinate) instead of starting from the last frame shown as the start epoch. That may require a strategy similar to Sahil's. The problem I faced with his solution is that when combining autoplay and draggable functionalities, they interfered with each other. I'm just a n00b, so it is probably down to my problem solving ability in JS.

No, not from a css or after effect sense! It does from an programming sense where [0] is the first in an array. I suppose it is in fact a form of an array defined first by the parameters of the spritesheet. It took me visually doing it with no overflow to get it.

I just figured it out at 2am, and I read through all the docs trying to solve it. I was defining the sprite sheet as one frame too long. It's weird, but you have to subtract one frame from the spritesheet size, at least for the solutions I found for the SteppedEase property. I know you put that in your solution, but I didn't understand why at first. I had all sorts of problems for this reason, but now I understand how everything works! Figuring it out involved numbering the frames, and console logging the math. Edit: If you change the spritesheet size to 9930 (actual), you get the odd things happening, including the frames going 123321312 (jumping) unexpectedly. I also confused the processes of the drag and main tween the play toggle was using.

I've kind of hit a wall trying to get the UX I want out of mobile. The touch is a bit too slow and I want to decrease the resolution by forcing a new frame ever 45 pixel like on the first example. Should I be using timelineMax instead? Can you combine the tweenMax and timelineMax libraries? I couldn't find an easy way to speed up the scrubbing. I added a test button to toggle the playback with a yoyo (what I meant when I said ping pong), and it is way too fast. I would like it to go at 10-15fps, as not to make people dizzy. I really am in love with the custom easing features. It's something so many NLEs and GUI programs ignore. Even in AE it is onerous as you have to guess and check with JS to see if you get the behavior you want. I love that little easing applet: https://greensock.com/docs/Easing

Good timing then I guess. I am looking through the release logs now and seeing what has changed since I gave up on Edge Animate two years ago and looked into GSAP. I woke up with an idea for better UX for this type of artwork when scrubbing through the frames in Luma Fusion on my iPad. My wife illustrates a lot of lenticular layered works that can be made like this in 3DMasterKit (or After Effects). It's pretty dizzying for some people to see the ping pong gif, and I think it works better when someone can control the view. That's what I had in mind, but couldn't find it. You just saved me a week messing about sub-optimally in jQuery. Cheers! I'm going to explore the best UX for mobile and desktop for these 3D illustrations now while I learn. I found only one site doing something similar for video frames, but it is closed source (well obfuscated JS): http://gifctrl.com/?q=yunggif.tumblr.com I think it is very cool for looped gifs and I'm surprised it's not the standard for image sites or reddit.

Sweet. Now I just need to keep the state of the frame when it leaves the area. I will fix after playing with it and update this post for anyone trying to do it in the future. I'm an Adobe Edge Animate refugee. I like this better, but it's a steep learning curve.

Thanks! After playing around, I've had some luck with the hover and got close to the behavior I want. Alas, there is always another issue to debug. I'm trying to think of the best strategy for "ping ponging" between the ends of the spritesheet. When you go far enough, it resets to 1 and jumps. This would be ideal with a perfect loop, but not with this. I will have to think about strategies. You could check the range, but browser widths will differ. Maybe a percentage based range would be best. Hopefully I can find a similar project as I learn the draggable.js library. Edit: You must open in codepen itself for the hover to work.

I am trying to bind hover to draggable, as in wherever the mouse is, it is the same as being dragged. The problem is that draggable works perfectly for mobile touch, but the experience is not good on desktop where a hover would be the expected behavior. Is there a simple way to bind the two? What I am trying to do is make scrubbing a spritesheet interactive. The user would not intuitively know to click and drag, so it must be hover. This thread explores the hover aspect of it: