emmanuelulloa
Members-
Posts
93 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by emmanuelulloa
-
Google DoubleClick and AdWords host GSAP on their CDN
emmanuelulloa replied to GreenSock's topic in Banner Animation
Is DrawSVGPlugin hosted in the CDN or do I have to use the one provided by the client and count it against it the ksize limit? -
Hello fellow GSAP-💚-loving friends! My name is Emmanuel Ulloa and I'm a Banner Developer with more than 20+ years of experience in the field (yeah I do remember the Pointroll action figures like Fatboy and Badboy that represented banner sizes) and also I've been working with GSAP since TimelineMax and TimelineLite (although my favorite always will be TimelineTiny, it always allowed me to squeeze the whole .swf under <40 kb). Today my employer let me go and I'm looking for the next opportunity. I'm a certified Doubleclick and Flashtalking developer and have also worked with other platforms like Sizmek. Although I'm located in beautiful Costa Rica 🇨🇷🌴🦥 I can work remotely with anybody around the world 🌐 (as long as you speak English too). My everyday job is taking art files (Photoshop, Illustrator, Sketch files) and turning them into animations for your Rich Media networks. If you are interested in my profile please visit me at https://www.linkedin.com/in/emmanuelulloa/ or DM me here. Thanks for your time.
-
When I want to use different eases in concurrent tweens I usually use two different calls with the same position labels. But I was wondering if there is better/"more correct" way to do this? What I currently use: .to("#f1-img", {scale:1, ease: "bounce.out"}, "FRAME1_ENTER" ) .to("#f1-img", {xPercent:0, ease: "circ.out"}, "FRAME1_ENTER" )
-
Interested if folks are still designing ads for google ad network
emmanuelulloa replied to cwiens's topic in Banner Animation
What is the new "banner industry" in which animation (and GSAP) is being requested more by customers? Scrollable sites? Explainers? Something new I've never heard of before? I'm asking to know in order to know where can I invest my learning time. -
From CSS cubic-bezier to GSAP ease
emmanuelulloa replied to emmanuelulloa's topic in Banner Animation
I meant the bouncing height is too big. It just needed a tiny bit of bouncing. ? I did not know! This is what I mean in regards to bouncing in cubic-bezier: cubic-bezier(.96, 1.34, .6, .89) gets transformed into: Tiny Bounce cubic-bezier(0.88, 2, 0.48, 0.71) gets transformed into: Boing Past -
Hello friends. Recently while working on a project I needed to make something bounce. However the regular bounce function was a little too big. I remember having some css cubic-bezier functions that I used a lot. Fortunately GSAP accepts eases as functions. So I asked ChatGPT to create a function that will transform my old css cubic-beziers into GSAP ease functions. Here is the function code: function parseCubicBezier(easeString) { const [x1, y1, x2, y2] = easeString .replace(/cubic-bezier|\(|\)/g, '') .split(',') .map(parseFloat); function cubicBezier(t) { const cx = 3.0 * x1; const bx = 3.0 * (x2 - x1) - cx; const ax = 1.0 - cx - bx; const cy = 3.0 * y1; const by = 3.0 * (y2 - y1) - cy; const ay = 1.0 - cy - by; function sampleCurveDerivativeX(t) { return (3.0 * ax * t + 2.0 * bx) * t + cx; } function sampleCurveX(t) { return ((ax * t + bx) * t + cx) * t; } function solveCurveX(x, epsilon) { let t0, t1, t2, x2, d2, i; for (t2 = x, i = 0; i < 8; i++) { x2 = sampleCurveX(t2) - x; if (Math.abs(x2) < epsilon) { return t2; } d2 = sampleCurveDerivativeX(t2); if (Math.abs(d2) < 1e-6) { break; } t2 = t2 - x2 / d2; } t0 = 0.0; t1 = 1.0; t2 = x; if (t2 < t0) { return t0; } if (t2 > t1) { return t1; } while (t0 < t1) { x2 = sampleCurveX(t2); if (Math.abs(x2 - x) < epsilon) { return t2; } if (x > x2) { t0 = t2; } else { t1 = t2; } t2 = (t1 - t0) * 0.5 + t0; } return t2; // Failure. } function solve(x, epsilon) { return sampleCurveY(solveCurveX(x, epsilon)); } function sampleCurveY(t) { return ((ay * t + by) * t + cy) * t; } return solve(t, 1 / 200); } return cubicBezier; } // Example usage const easeFunction = parseCubicBezier('cubic-bezier(.17,.67,.83,.67)'); const easedPosition = easeFunction(0.5); console.log(easedPosition); And here is my collection of css cubic-beziers extracted from a SCSS library I used in another project: "easeInSine": cubic-bezier(0.12, 0, 0.39, 0), "easeOutSine": cubic-bezier(0.61, 1, 0.88, 1), "easeInOutSine": cubic-bezier(0.37, 0, 0.63, 1), "easeInQuad": cubic-bezier(0.11, 0, 0.5, 0), "easeOutQuad": cubic-bezier(0.5, 1, 0.89, 1), "easeInOutQuad": cubic-bezier(0.45, 0, 0.55, 1), "easeInCubic": cubic-bezier(0.32, 0, 0.67, 0), "easeOutCubic": cubic-bezier(0.33, 1, 0.68, 1), "easeInOutCubic": cubic-bezier(0.65, 0, 0.35, 1), "easeInQuart": cubic-bezier(0.5, 0, 0.75, 0), "easeOutQuart": cubic-bezier(0.25, 1, 0.5, 1), "easeInOutQuart": cubic-bezier(0.76, 0, 0.24, 1), "easeInQuint": cubic-bezier(0.64, 0, 0.78, 0), "easeOutQuint": cubic-bezier(0.22, 1, 0.36, 1), "easeInOutQuint": cubic-bezier(0.83, 0, 0.17, 1), "easeInExpo": cubic-bezier(0.7, 0, 0.84, 0), "easeOutExpo": cubic-bezier(0.16, 1, 0.3, 1), "easeInOutExpo": cubic-bezier(0.87, 0, 0.13, 1), "easeInCirc": cubic-bezier(0.55, 0, 1, 0.45), "easeOutCirc": cubic-bezier(0, 0.55, 0.45, 1), "easeInOutCirc": cubic-bezier(0.85, 0, 0.15, 1), "easeInBack": cubic-bezier(0.36, 0, 0.66, -0.56), "easeOutBack": cubic-bezier(0.34, 1.56, 0.64, 1), "easeInOutBack": cubic-bezier(0.68, -0.6, 0.32, 1.6), "sine-ease-in": cubic-bezier(0.47, 0, 0.745, 0.715), "sine-ease-out": cubic-bezier(0.39, 0.575, 0.565, 1), "sine-ease-in-out": cubic-bezier(0.39, 0.575, 0.565, 1), "quad-ease-out": cubic-bezier(0.25, 0.46, 0.45, 0.94), "quad-ease-in": cubic-bezier(0.55, 0.09, 0.68, 0.53), "quad-ease-in-out": cubic-bezier(0.455, 0.03, 0.515, 0.955), "cubic-ease-in": cubic-bezier(0.55, 0.06, 0.68, 0.19), "cubic-ease-out": cubic-bezier(0.22, 0.61, 0.36, 1), "cubic-ease-in-out": cubic-bezier(0.65, 0.05, 0.36, 1), "quart-ease-in": cubic-bezier(0.895, 0.03, 0.685, 0.22), "quart-ease-out": cubic-bezier(0.165, 0.84, 0.44, 1), "quart-ease-in-out": cubic-bezier(0.77, 0, 0.175, 1), "quint-ease-in": cubic-bezier(0.755, 0.05, 0.855, 0.06), "quint-ease-out": cubic-bezier(0.23, 1, 0.32, 1), "quint-ease-in-out": cubic-bezier(0.86, 0, 0.07, 1), "circ-ease-in": cubic-bezier(0.6, 0.04, 0.98, 0.335), "circ-ease-out": cubic-bezier(0.075, 0.82, 0.165, 1), "circ-ease-in-out": cubic-bezier(0.785, 0.135, 0.15, 0.86), "expo-ease-out": cubic-bezier(0.19, 1, 0.22, 1), "expo-ease-in": cubic-bezier(0.6, 0.04, 0.98, 0.335), "expo-ease-in-out": cubic-bezier(0.785, 0.135, 0.15, 0.86), "back-in": cubic-bezier(0.6, -0.28, 0.74, 0.05), "back-out": cubic-bezier(0.18, 0.89, 0.32, 1.28), "back-in-out": cubic-bezier(0.68, -0.55, 0.265, 1.55), "bounce-in": cubic-bezier(0.24, -0.44, 0.17, 0.27), "bounce-out": cubic-bezier(0.64, 0.57, 0.67, 1.53), "bounce-in-out": cubic-bezier(0.76, -0.245, 0.24, 1.245), "snap-out": cubic-bezier(0, 1, 0.5, 1), "snap-in": cubic-bezier(0.06, 0.98, 0.19, 0.99), "smooth": cubic-bezier(0.365, 0.005, 0.355, 1), "sine": cubic-bezier(0.39, 0.58, 0.57, 1), "quad": cubic-bezier(0.25, 0.46, 0.45, 0.94), "cubic": cubic-bezier(0.22, 0.61, 0.36, 1), "circ": cubic-bezier(0.075, 0.82, 0.165, 1), "expo": cubic-bezier(0.19, 1, 0.22, 1), "bounce": cubic-bezier(0.65, 1.95, 0.03, 0.32), "spring": cubic-bezier(0.25, 2, 0.75, 0.5), "elastic": cubic-bezier(0.47, 2.02, 0.31, -0.36), "swing": cubic-bezier(0.175, 0.885, 0.32, 1.275), "overshoot": cubic-bezier(0.41, 0.41, 0.35, 1.2), "anticipate": cubic-bezier(0.5, 0, 0.8, 0.15), "hesitate": cubic-bezier(0.2, 1, 0.9, -0.5), "hesitate2": cubic-bezier(0.5, 1, 0.5, -0.25), "snap": cubic-bezier(0.755, 0.05, 0.855, 0.06), "sharp": cubic-bezier(0.4, 0, 0.6, 1), "acceleration": cubic-bezier(0.4, 0, 1, 1), "deceleration": cubic-bezier(0, 0, 0.2, 1), "standard": cubic-bezier(0.4, 0, 0.2, 1), "paused": cubic-bezier(0, 1, 1, 0), "circ-in-out": cubic-bezier(0.88, 0.14, 0.12, 0.86), "cubic-in-out": cubic-bezier(0.66, 0, 0.34, 1), "ease-in-out2": cubic-bezier(0.42, 0, 0.58, 1), "expo-in-out": cubic-bezier(0.9, 0, 0.1, 1), "quad-in-out": cubic-bezier(0.48, 0.04, 0.52, 0.96), "quart-in-out": cubic-bezier(0.76, 0, 0.24, 1), "quint-in-out": cubic-bezier(0.84, 0, 0.16, 1), "fast-slow": cubic-bezier(0, 0.45, 0.45, 1), "fast-fast-slow": cubic-bezier(0, 0.9, 0.45, 1), "fast-slow-slow": cubic-bezier(0, 0.45, 0.1, 1), "slow-fast": cubic-bezier(0.45, 0, 1, 0.45), "slow-fast-fast": cubic-bezier(0.45, 0, 1, 0.15), "slow-slow-fast": cubic-bezier(0.9, 0, 1, 0.45), "ant-s1": cubic-bezier(1, -0.51, 0, 1.51), "ant-s2": cubic-bezier(0.99, -2.18, 0.01, 3.18), "ant-q1": cubic-bezier(0.5, -1, 0.5, 2), "ant-q2": cubic-bezier(0.5, -1.5, 0.5, 2.5), "smooth-operator": cubic-bezier(0.64, 0.03, 0.07, 0.97), "endless-bummer": cubic-bezier(0.99, 0.03, 0.42, 0.97), "get-around": cubic-bezier(1, 0.07, 0.11, 1), "unknown-soldier": cubic-bezier(0.33, 0.02, 0.11, 1), "spanish-caravan": cubic-bezier(0.76, 0, 0.43, 0.94), "five-to-one": cubic-bezier(0.32, 0.05, 0.27, 1), "wild-in-the-streets": cubic-bezier(0.5, 1, 0.35, 1), "daniel": cubic-bezier(0, 0.1, 0.53, 1.34), "cocodrile-tears": cubic-bezier(0.47, 1.35, 0.53, 1.33), "crystal-ship": cubic-bezier(0.99, -0.55, 0.73, 1), "tencc": cubic-bezier(0.14, -0.14, 0, 1), "bishop": cubic-bezier(1, -0.66, 0.42, 0.97), "scarborough-fair": cubic-bezier(1, 0.06, 0.73, 0.98), "tulsa-time": cubic-bezier(0.19, 2.51, 0.43, 1), "norwegian-skog": cubic-bezier(0.25, 0.51, 0.35, 0.95), "weird-fishes": cubic-bezier(0.88, 0.04, 0.88, 0.95), "brave-strangers": cubic-bezier(0, 0.01, 0, 1), "stranger-than-diction": cubic-bezier(1, 0, 0.74, 1), "the-gambler": cubic-bezier(0.47, -0.48, 0, 1.03), "cracklin-rose": cubic-bezier(0.05, 0.03, 0, 1.16), "ease-10": cubic-bezier(0.1, 0, 0.9, 1), "ease-20": cubic-bezier(0.2, 0, 0.8, 1), "ease-30": cubic-bezier(0.3, 0, 0.7, 1), "ease-40": cubic-bezier(0.4, 0, 0.6, 1), "ease-50": cubic-bezier(0.5, 0, 0.5, 1), "ease-60": cubic-bezier(0.6, 0, 0.4, 1), "ease-70": cubic-bezier(0.7, 0, 0.3, 1), "ease-80": cubic-bezier(0.8, 0, 0.2, 1), "ease-90": cubic-bezier(0.9, 0, 0.1, 1), "ease-100": cubic-bezier(1, 0, 0, 1), "ease-0-10": cubic-bezier(0, 0, 0.1, 1), "ease-0-20": cubic-bezier(0, 0, 0.2, 1), "ease-0-30": cubic-bezier(0, 0, 0.3, 1), "ease-0-40": cubic-bezier(0, 0, 0.4, 1), "ease-0-50": cubic-bezier(0, 0, 0.5, 1), "ease-0-60": cubic-bezier(0, 0, 0.6, 1), "ease-0-70": cubic-bezier(0, 0, 0.7, 1), "ease-0-80": cubic-bezier(0, 0, 0.8, 1), "ease-0-90": cubic-bezier(0, 0, 0.9, 1), "ease-50-0": cubic-bezier(0.5, 0, 0, 1), "ease-50-10": cubic-bezier(0.5, 0, 0.1, 1), "ease-50-20": cubic-bezier(0.5, 0, 0.2, 1), "ease-50-30": cubic-bezier(0.5, 0, 0.3, 1), "ease-50-40": cubic-bezier(0.5, 0, 0.4, 1), "ease-50-50": cubic-bezier(0.5, 0, 0.5, 1), "ease-50-60": cubic-bezier(0.5, 0, 0.6, 1), "ease-50-70": cubic-bezier(0.5, 0, 0.7, 1), "ease-50-80": cubic-bezier(0.5, 0, 0.8, 1), "ease-50-90": cubic-bezier(0.5, 0, 0.9, 1), "ease-50-100": cubic-bezier(0.5, 0, 1, 1), "boing": cubic-bezier(0.35, 2, 0.1, 0.2), "boingPast": cubic-bezier(0.88, 2, 0.48, 0.71), "swoosh": cubic-bezier(0.63, -0.28, 0.13, 1.55), "gottaDash": cubic-bezier(0.9, -1.4, 0.61, 1.61), "slowMo": cubic-bezier(0, 1.35, 1, -0.35), "slowInOut": cubic-bezier(0.36, -0.14, 0.29, 1.21), "smallOver": cubic-bezier(0.41, 0.41, 0.35, 1.1), "superEase": cubic-bezier(0.605, 0.165, 0.045, 0.945), "strongOut": cubic-bezier(0, 0, 0.255, 0.995), "strongIn": cubic-bezier(0.975, 0.015, 1, 1), "moon-shine": cubic-bezier(.19, 1.78, .73, 1.35), "tailwind-in": cubic-bezier(.8, 0, 1, 1), "tailwind-out": cubic-bezier(0, 0, .2, 1), "tailwind-in-out": cubic-bezier(.4, 0, .6, 1), "tiny-bounce": cubic-bezier(.96, 1.34, .6, .89), "small-bounce": cubic-bezier(.99, 1.6, 0, .72), "easeout": cubic-bezier(0.5, 0.5, 0, 1), "jump": cubic-bezier(.86, 0, .69, 1.57) Then you can use it like this: .to("#element", {xPercent: 50, ease: parseCubicBezier('cubic-bezier(.96, 1.34, .6, .89)') }, "INTRO") I think that some of you might find it useful so I like to share it with the community.
-
Need to get minimal GSAP file size for using on the banner
emmanuelulloa replied to Betegy's topic in Banner Animation
I assume is for some sort of device that people will take in the field. I have dealt with stuff like that with healthcare providers. I usually go with CSS animations and using JS to toggle classList names to make them happen. -
Hello friends. If you are a banner animator and can spare a couple of minutes I would ? to share a project I've been working on. Basically is a code generator to create configuration objects by using strings that describe the effect. Let me know what you think. I use it in my banners to animate faster. Regards!
-
Hello friends. In After Effects a coworker used a lot this ease: https://cubic-bezier.com/#.2,1,.9,-0.5 He named as 'hesitate' ?. Is there one similar within the standard eases or is CustomEase the only way to go?
-
Thanks @Rodrigo that one is a more elegant solution for my code.
-
@Rodrigo sort of what I need but it does not tween to the reset of the values. I'm working on a little game and I'm just looking for a way to transform sprite games and particles (most of the objects have a transformation applied) to its original state with a simple object.
-
Hello friends. Is there a way to easily reset an element/object without having to do this: o.x = 0; o.y = 0; o.xPercent = 0; o.yPercent = 0; o.scale = 1; o.rotation = 0; o.rotationX = 0; o.rotationY = 0; o.opacity = 1; ///.etc, .etc Something like css transform: none;maybe? (within GSAP).
-
Task runner for packing ads (making the zip files).
emmanuelulloa replied to emmanuelulloa's topic in Banner Animation
Interesting! -
Strategy to build fast Banner Ads with GSAP?
emmanuelulloa replied to JasonD's topic in Banner Animation
I export .png assets at the banner size so I save myself a lot of time NOT positioning assets (since they are already positioned in the image itself). You may think that trimming those transparent pixels would save you size but actually I rather save time (and the difference is not that big anyways). -
Task runner for packing ads (making the zip files).
emmanuelulloa posted a topic in Banner Animation
Hello friends. Any task runner that makes packing ads easier? I currently go to each banner folder, select the files and then zip them. But I'm sure there should be an easier way. -
Hello friends. Has anybody worked banners in Centro/Basis? Do you know if they allow or have a component for videos as a background? A client wants to know and I have never use it and my experience limits to RM with Doubleclick. Regards.
- 1 reply
-
- 1
-
Animated vs static? Is that the reason for the slowdown?
emmanuelulloa replied to somnamblst's topic in Banner Animation
What about doing statics with little bits of animation? Like: CTA jumps/scales a couple of times. Animated background (images with zooming/panning/Ken Burns effects or looping animations) Text lights up/blinks once in while. 1 frame with all elements fading in or sliding into position very fast at the beginning. I mean, maybe people is not willing to invest 15 seconds into reading and putting together the whole message at the end. Maybe marketers are focusing too much on storyboarding and not enough in copywriting. -
Mobile App for Greensock Animations (WIP)
emmanuelulloa replied to michaelsboost's topic in Banner Animation
I love seeing this kind of entrepreneurship of bringing a more visual approach to animation software. The FB link does not seems to work. I'm looking at the Youtube video: https://www.youtube.com/watch?v=nbHPzFBpeaw -
Preview Itsy Banner Online Banner Compression Tool
emmanuelulloa replied to Carl's topic in Banner Animation
@Carl NOW it did worked out beautifully!!!! Congrats! You have a winner on your hands guys! -
Preview Itsy Banner Online Banner Compression Tool
emmanuelulloa replied to Carl's topic in Banner Animation
@Carl This is a wonderful concept! However it did not worked out for me. It would be great to understand the expected development workflow so the banners workout in the end. My setup usually is index.html calling the Doubleclick Enabler, styles.css, 1 external .js file and a bunch of images. -
Excellent and valid points ?. And until we know that GSAP is whitelisted we have to still do all that by hand while trying to convince the client to reduce the scope of the animation in the banner ?.