Jimmi Heiserman

Let me know if you would be interested in my animation services. Here is a hodgepodge of animations, all in one page. http://JimmiHeiserman.com/bannerDev/

oh wow, thanks so much for the quick reply. I just now googled this, and I will refresh my knowledge on this flag. For others, here is the link explaining this: https://greensock.com/immediateRender

I used to be a GSAP wiz for years. But haven't touched it for close to a year, and now I feel like a noob for forgetting the very basics. "From" is supposed to tween from a provided number to the pre-existing value. I made the simplest little FROM CodePen so someone can point out how I am misunderstanding this feature from my time away from this tool. I want the words to be initialized at 200px, then animate FROM 400px (back to their 200px starting point). But it goes all the way back to 0px. What am I doing wrong?

This looks exciting! Well designed illustrations. I just sent you a message via your account here.

I would be interested in this project at a rate of $95/hr. I work fast and clean; if you need maintainable code to be read by another developer down the line, or small filesize limitations. My most recent demonstration site can be found here, all done in hand coded HTML, css, and JavaScript utilizing the basic AND premium access of GSAP platform. I'm a member! Jimmiheiserman.com/bannerDev jimmi.heiserman@gmail.com

Yup, this is exactly what I'm looking for. Perfect solution to keep frame rate high and not waste resources.

This may be a better question for a general Dev question site, but you guys are so knowledgeable of this stuff I have to ask it here. I recently created a bunch of self-contained svg animations for a client, where each svg contains it's own JavaScript and loads gsap engine and utilizes that for it's animation. A really nice trick really, kind of like an animated png; just drop it into your code as an <object>, not an img or such. But they (any animation really) hog a lot of resources when many are on a page, or when they are large. Do you know of a way to pause the animations, or auto display:none, when not on screen/below the fold? If there is a nice gsap feature that handles this, great. I imagine it's more of a JavaScript detection code to determine if it's actually on screen, and I don't know if that's possible from a self-contained svg file. Anyway, shot in the dark how people handle resource management with gsap in situations like this. Thanks.

ahh, I see. Thanks again.

I've been staring at this for too long, some maybe I just need a second set of eyeballs on this. I really thought this single line of code should fire once every 3 seconds (after the initial 6 second wait period). But it appears to be firing twice at the same time after the first solo-fire. I must have some flawed understanding of how repeat + repeatDelay + delay works. I was expecting: nothing for first 6 seconds call function and log some text with random number wait 3 seconds call function and log some text with random number wait 3 seconds call function and log some text with random number wait 3 seconds etc... new TimelineMax({repeat:-1, repeatDelay:3, delay:6}).call(func);

Thanks for showing the other way to do it too with pseudo delays and using a non-change animation as a wait timer. I cleaned up your codepen.io in a fork. I figured since we aren't actually tweening anything for those last 2 seconds, I made both the target and the vars an empty object. That's just preference though. But I did consider the yoyo:true you added to be a bug because not only do we not need it, it causes a flicker/overwrite around the second or third repeat because we don't really want to bounce backwards because we used two "to"s. But again, thanks for that codepen. Seeing how others do something expands our knowledge on this. Tweening is like a chess game, with some many ways to win, and you get better by seeing others moves and strategy you may have missed.

I think I may have answered my own question. new TimelineMax().set(object, {autoAlpha:0}).to(object, 1, {autoAlpha:1}).to(object, 3, {autoAlpha:0, delay:2}).repeatDelay(4).repeat(-1); This appears to work in my example, hitting all those durations and delays of 1, 2, 3, and 4. Do others agree this is correct or can I fix it or optimize it further with just fromTo or something?

I love the extreme chaining and custom animations you can make in just a single line of code. I was wondering if a repeating animation can be done like so: object starts invisible, alpha:0 immediately begin to fade in over 1 second wait and stay visible for 2 seconds fade out over 3 seconds wait 4 seconds for the animation to repeat I used durations of 1, 2, 3, and 4 to make it easy to show that I want each leg of the animation to have its own duration and delays. I imagine something like this below, but I might not even be close, or this might not be possible in a single chained command? tl.set(object, {autoAlpha:0}).fromTo(object, 1, {autoAlpha:0}, {autoAlpha:1, duration:2, repeat:-1, yoyo:true, repeatDelay:2}).delay(4);

Hello Danilo, Thanks for posting here about job and project opportunities. I have sent you an email but thought I would respond here too. I have been a flash animator/programmer along with website and game development for over a decade and have transitioned to Javascript/CSS animations a few years ago as well. I have primarily worked for ad agencies in the Boston area from 2007 to present (but also San Francisco, Orange County, Philly, and Rhode Island) building websites, interactive experiences, and banners for accounts and clients such as Lego, Reebok, Adidas, Cadillac, ADP, Zappos, Hasbro, WWE/2K Games, and more. I have just completed a new demonstration site showing off cross-platform, optimized Javascript animations and some of the banner skills I am capable of building. I have worked with tight filesizes such as 100/150kb and created expandable, interactive experiences with fewer restrictions. Let me know what you think and if you have any opportunities to work together soon! JimmiHeiserman.com/bannerDev Thanks again, Jimmi Heiserman

While you have hopefully already filled this position/need, I would also like to reach out as a possible future freelance candidate. I have been programming video games, websites, and banners in Flash for a decade+, and HTML/CSS/Javascript increasingly for the past 5 years. I just released my demonstration site this morning (Sept, 25th, 2018) with banner animation examples. Naturally, this translates to websites as well. Thanks for viewing. JimmiHeiserman.com/bannerDev

JimmiHeiserman.com/bannerDev Freelance Web Developer with a focus on banner programming, animating web experiences, and interactive game-like mechanics. Coding skills that benefit large-scale advertising agencies, digital shops, and personal web enhancements. I worked heavily out of the Boston area and have freelanced for many ad agencies in that city since 2007. I also freelanced for agencies in Philadelphia, San Francisco and Rhode Island but primarily work remotely these days living in Salem, MA. My background used to be Flash Game Development and Web and Banner dev over the past decade. My brand new demonstration site is up now to show off some of the type of banner animations I build. Thanks for stopping by, Jimmi Heiserman JimmiHeiserman.com/bannerDev

Thanks for the detailed reply. I def think this is a safari bug and not a GSAP issue, as always. I added the will-change: transform, filter and it worked great in Safari mobile and fixed the bug!... but it added all sorts of flicker to Chrome and FF. Figures. Then I fixed the flicker with just applying will-change to the filter. but the z-index was all out of whack in Chrome after I did that. I couldn't get any layers to play nice, no matter how I layered them, forced high z-indexes, etc. after the will-change was active. It's just too buggy in Chrome. I ended up just turning off filters for Safari mobile. It was a small design tweak that most users will still see nicely. I hate turning off features for a demographic, but I just couldn't get around this browser crashing bug on their phones. Thanks again though!

I have a very hard to track down bug that entirely seems tied to iOS Safari on mobile. But only some versions. So weird. I deconstructed some parts from a project I am working on that is causing me lots of trouble in iOS Safari. Here is the simpler link, cleaned up to hopefully isolate just the issue. http://jimmiheiserman.com/bannerDev/crash/?crash=6and7andX this crashes 6, 6 Plus, 6s Plus, 7, and iPhone X, (but NOT 6s or X ) http://jimmiheiserman.com/bannerDev/crash/?crash=7andX This crashes 7 and X (and sometimes 6s Plus) http://jimmiheiserman.com/bannerDev/crash/ This won't crash any of them. [Then the weird one!] http://jimmiheiserman.com/bannerDev/crash/?crash=filterOK this allows the filters to NOT crash the browser, because I removed scale from the tween I am not sure if it is caused by my inline SVG's, my large sprite sheet, but if I remove too many things, the error does not occur. So I am not able to know exactly what is causing it. A combination of things I imagine. But it does occur right when I am about to animate brightness, along with top, left, scale, and zIndex. But if I remove a few tweens, such as scale, then the filter doesn't cause a crash. below is an excerpt that shows what the url parameters are doing that causes the crash. var orbits; var crash = getUrlVars()["crash"]; orbits = [{left:'50%', top:'100%', scale:.25, zIndex:6}, {left:'0%', top:'70%', scale:.12, zIndex:5}, {left:'20%', top:'30%', scale:.08, zIndex:4}, {left:'50%', top:'0%', scale:.05, zIndex:3}, {left:'80%', top:'30%', scale:.08, zIndex:2}, {left:'100%', top:'70%', scale:.12, zIndex:1}]; if (crash == 'filterOK') { console.log('filterOK'); orbits = [{left:'50%', top:'100%', zIndex:6, filter: 'brightness(100%)'}, {left:'0%', top:'70%', zIndex:5, filter: 'brightness(80%)'}, {left:'20%', top:'30%', zIndex:4, filter: 'brightness(60%)'}, {left:'50%', top:'0%', zIndex:3, filter: 'brightness(40%)'}, {left:'80%', top:'30%', zIndex:2, filter: 'brightness(60%)'}, {left:'100%', top:'70%', zIndex:1, filter: 'brightness(80%)'}]; } else if (crash == '7andX') { console.log('crashing iPhone X (and 6s Plus and 7 sometimes)'); orbits = [{left:'50%', top:'100%', scale:.25, zIndex:6, filter: 'brightness(100%)'}, {left:'0%', top:'70%', scale:.12, zIndex:5, filter: 'brightness(80%)'}, {left:'20%', top:'30%', scale:.08, zIndex:4, filter: 'brightness(60%)'}, {left:'50%', top:'0%', scale:.05, zIndex:3, filter: 'brightness(40%)'}, {left:'80%', top:'30%', scale:.08, zIndex:2, filter: 'brightness(60%)'}, {left:'100%', top:'70%', scale:.12, zIndex:1, filter: 'brightness(80%)'}]; } else if (crash == '6and7andX') { console.log('crashing 6, 6 Plus, 6s Plus, 7, and iPhone X, (but NOT 6s or 8)'); orbits = [{left:'50%', top:'100%', scale:.25, zIndex:6, webkitFilter: 'brightness(100%)', filter: 'brightness(100%)'}, {left:'0%', top:'70%', scale:.12, zIndex:5, webkitFilter: 'brightness(80%)', filter: 'brightness(80%)'}, {left:'20%', top:'30%', scale:.08, zIndex:4, webkitFilter: 'brightness(60%)', filter: 'brightness(60%)'}, {left:'50%', top:'0%', scale:.05, zIndex:3, webkitFilter: 'brightness(40%)', filter: 'brightness(40%)'}, {left:'80%', top:'30%', scale:.08, zIndex:2, webkitFilter: 'brightness(60%)', filter: 'brightness(60%)'}, {left:'100%', top:'70%', scale:.12, zIndex:1, webkitFilter: 'brightness(80%)', filter: 'brightness(80%)'}]; } ... ... ... for (i = 0; i < 6; i++){ tlToy.to('.spaceship1', 2, orbits[i%SHIP_COUNT], 'orbit' + (i+1)); tlToy.to('.spaceship2', 2, orbits[(i+1)%SHIP_COUNT], 'orbit' + (i+1)); tlToy.to('.spaceship3', 2, orbits[(i+2)%SHIP_COUNT], 'orbit' + (i+1)); tlToy.to('.spaceship4', 2, orbits[(i+3)%SHIP_COUNT], 'orbit' + (i+1)); tlToy.to('.spaceship5', 2, orbits[(i+4)%SHIP_COUNT], 'orbit' + (i+1)); tlToy.to('.spaceship6', 2, orbits[(i+5)%SHIP_COUNT], 'orbit' + (i+1)); } So you can only trigger this bug using certain versions of iPhone. Oddly, iPhone 8 seems immune to this bug. Works fine on Android, IE, EDGE, Chrome, FF, even Chrome on iPhone. What's weird, is if I just do a brightness tween alone, it does not cause the browser to crash. or even if I do brightness tween along with a few other tweens on the same object. But once I add a mixture of tweens into one call, it crashes the browser. But short of trying hundreds of combinations, it feels like it triggers a bug when there is a lot going on. But I have had "a lot going on" before, and browsers just slow down, get choppy. I've never seen a GSAP animation break just some versions of Safari. While this bug seems quite difficult to track down from my perspective, maybe in your travels of cross-compatibility you have seen some very weird things with iOS. It almost feels like a race condition is being hit.

Why does SplitText sometimes cause a reflow issue when it is running? I made a codepen with just the right amount of word lengths and width to trigger my bug. When I revert the split text back upon completion, the text snaps back to not having the last word broken apart incorrectly. Is there a solution to fix this word wrap issue without modifying my own HTML or CSS code? (Imagine this is dynamic and I would like every type of sentence inside this rectangular div to not jump or break sporadically when it animates.) I have read about using more than just chars as the split type but any combination of chars, words, or lines for type doesn't seem to help me here.

Another benefit to JS GSAP setting up styles, I often have an initialization function that sets everything in the beginning. If I need to call that function again, it is quite easy to 'reset' everything on the fly. In CSS, I don't even know how you can truly 'start over' during runtime. Thanks!

Hello again team, I noticed that the URL https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js points to VERSION: 1.18.0, DATE: 2015-09-05, a three-year-old version. I don't know enough about CDN's and whether or not the latest folder in that url is dynamic or static. I noticed this when I type 'TweenMax' into JS Pen Settings in codepen. It autocomplete/suggests the 'latest' url, not 2.0.1 or other. Does this need to be fixed? something I wanted to bring to your attention if it is indeed pulling the wrong JS file. Maybe a dynamic 'latest' was bad practice to auto-pull the newest, potentially breaking features the devs didn't anticipate, and you stopped promoting that URL? If this is the case, maybe get codepen.io to stop pointing to that 'latest' as their default suggestion? Should devs use 'latest' in other libraries? (I don't know what the standard practice for that was/is).

PointC, Yes, setting scale with GSAP fixes my project's bug. Thanks! I guess the reason some browsers don't propagate their styles down through a hidden element is for performance reasons; a hidden element that has no tree to traverse would be exceptionally fast. But when this 'gotcha' happens, oh boy. But how does GSAP keep track of display:none styles when the DOM doesn't; in a separate data field in its own duplicate structure? PointC and Carl, I read here and there on this forum about avoiding mixing CSS with GSAP for positions and rotations, etc. Over the weeks, I have been setting more and more styles using GSAP in the runtime JS and pulling it out of the CSS file. My CSS file is becoming decreasingly small with my JS growing. I have less and less faith in CSS implementation and more in GSAP. Would you argue it is best practice to try to do all styles directly through the GSAP engine if you have heavy use of animations? It is beginning to seem like that.

I am experiencing a bug in a larger project so I made a codepen to hopefully highlight my problem. I have a div wrapped inside an outer container div. In CSS, I want to hide the container with display:none, and I want to shrink the inner div to 0.5 scale. Then in GSAP, I want to show the container by setting it back to 'block', and have the inner container realign via a from tween. But when I combine a display toggle, with a scale, with a FROM tween, the scale of my inner div gets ignored. I can't seem to work through the logic on why this is? If I don't start with display:none in my CSS, the .05 scale is correct. OR if I change my last tween from a FROM to a TO, the 0.5 scale is also correct. But a FROM tween on the 'x' position causes the 'scale' to be ignored/dropped/overwritten? the JS code copied here for a quick glance: var tl = new TimelineMax(); tl.to('#outer', 1, {x:100, display:'block'}); tl.from('#inner', 1, {x:100}); (I know there are other ways to hide a div until you are ready to show it, like alpha, opacity, autoAlpha, but in this particular case, is this a bug or just a conflict in the way I am approaching it?)

SOLVED, UTF-8 That was it! Thanks. Weird that this just burned me on my own domain, and not on a local server or codepen.io? Again, thanks for the quick team-effort response.

[Original poster here, GSAP Forums locked me out of my JimmiQR account] No, missing those tags were not the issue, I just did that to show the simplest example that triggers it. This was happening in a full html/css/js site I am working on. Here is one with more tags, same error: http://jimmiheiserman.com/archive/gsap/text-plugin-error-2.html