Leaderboard

Well, look who surfaced for air. We didn't even have to use the word canvas.

Use an object or Map if you want to store stuff by name. var map = new Map(); var obj = {}; for(var i = 0; i < 10; i++){ var tl = new TimelineMax(); obj["slide" + i] = tl; map.set("slide" + i, tl); } console.log(obj.slide3 === map.get("slide3")) // true

Hi @chiho, Quite simply - step by step: https://www.w3schools.com/graphics/svg_line.asp Just an example: Just try it ... Mikel

hmmm... I just looked at your link again and I'm still not seeing any strokes. Here's your SVG and code dropped into a demo. I've added the stroke via CSS and all seems to be working.

https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

I'd probably just adjust the eases a bit. Maybe something like this? You can adjust the config in those elastic eases to your liking or create a custom ease too. When you're looking for a smooth transition from the first to the second tween, you'll usually want to easeIn to the first and easeOut of the second. You had them both as easeOut in your original demo which can be problematic for the type of effect you're looking for here. Happy tweening.

Hi @smallio Is there any reason you're not creating a timeline for each of those and playing it on mouseenter? Something like this: Does that help at all? Happy tweening.

Hi @radutrs, Something like this ... Happy landing ... Mikel

Wargaming is looking to hire an HTML5 Animator (Banners) to join the Interactive Media Team. In this role, you will create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate), resize and adapt them for various advertising platforms, and manage localization of resized/adjusted banners. The Interactive Media Team help bring new players to the Wargaming universe by delivering quality marketing digital assets: landing pages, promo web sites, animated and interactive web advertising, newsletters, and more. What you will do: — Create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate) — Resize and adapt banners according to technical specifications of different advertising platforms (Google AdWords, DoubleClick, Yandex, etc.) — Localize resized and adapted banners (30+ languages) using internal tools Requirements: — Experience creating banner ads for a variety of advertising platforms with different technical requirements — Skilled in creating complex animation, interactive features (both within the 150 kB limit) and realistic special effects (blowups, water, fire, dust) using HTML/JS/Canvas — Hands-on experience with Adobe Animate — Knowledge of browser specifics (especially IE10+) — At ease with 2D graphics (bitmap, vector); proficient in Adobe Photoshop and Adobe Illustrator — Experience working with GSAP library — Portfolio — Pre-Intermediate or higher level of English Desirable: — Experience creating games using HTML5 — Knowledge of WebGL 3D — UI/UX expertise — Experience working in the games industry — Knowledge of Russian Motivating video about why we cool Our portfolio Please, apply here

Hi @smallio, is this better ... function func() { TweenMax.staggerTo(split.chars, 0.5, {y:78, ease: Elastic.easeOut.config(.4, .95), force3D:true}, 0.03, 0); // TweenMax.staggerTo(split.chars, 0.5, {y:0, ease: Elastic.easeOut.config(.4, .95), force3D:true, onComplete:funcAgain}, 0.03, 0.5); }; Sewn twice, sometimes does not work. Or, is that,what you want to achieve (position problem): Try it. Mikel

Please see @GreenSock‘s response here regarding viewport units

Hi @Salmen, Welcome to GreenSock - and your coding becomes easy. Perhaps like this - here in two stages: Happy tweening ... Mikel

Oh that is different than I was picturing. You said carousel so my mind went elsewhere. We had a similar question a few months ago. @Sahil has a nice solution in this thread. Happy tweening.

Hi, Aphalina Animator is a visual authoring tool that produces human-readable gsap + svg code. I just launched version 1.2 with some new features: path motion, hand-drawing imitation, clip masks, sprite sheets, sequence animations (similar to GSAP staging). It is paid app but can be used for free for non-commercial projects. Project link is aphalina.com. Any feedback is highly appreciated!

[updated September 2, 2020] Good news: Google pushed GSAP to their CDN (for use with DoubleClick and AdWords ads). URLs can be found at: https://support.google.com/richmedia/answer/6307288#gs If you get news of other ad networks that have similar news to share, feel free to post here. Enjoy!

@PointC Ah love it dude!!! Thank you so much

Hi mikel, I have solve the Problem. Thanks a lot for your prompt help. Very nice tutorial.

Hi @gsmas That's one of the strengths of GreenSock. More here ...: Understanding the Position Parameter Clear the position ... Mikel

Thank you a lot @mikel. Have a great day!

Well, you can increase the scale to meet your needs. I only added a quick scale because you said you wanted to increase the size, but your original pen only had a 'y' position animation. The custom ease is working fine now so feel free to adjust and add any animation properties you like.

Looks like Carl's Coding College is in session today. Nicely done @Carl.

Ha! I'm the same way with SVG or mask related questions. I can't resist and start drooling. ? Blake will almost always appear when canvas and/or Pixi are mentioned in a thread. Everyone does seem to have their strong areas and favorites. Now if I can just get a PointC-SVG-Signal to show in the sky outside my window, I'd be all set.

Thanks for the demo. The main problem is that in order to use CustomEase you must load the CustomEase.min.js file. I added it to your CodePen and it works now https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js This page here explains how to get all the URLs of the bonus plugins to use on CodePen: https://greensock.com/try-plugins If you want your second TweenMax animation to wait until the first animation is done playing, you will need to add a delay TweenLite.to( "#img2", 2.5, {ease:CustomEase.create("custom", "M0,0,C0.127,0.382,0.284,0.674,0.444,0.822,0.638,1.002,0.961,0,1,0"),y: -500, delay:3}); For building sequences, we recommend using Timelines. Definitely check out: https://greensock.com/get-started-js https://greensock.com/timelinelite If you don't want to see #img2 until it animates up and down, you will need to also set its opacity to 0 or visiblity:hidden somewhere in your css and then make it visible in your animation code.

Hi @PointC, Your pen inspired me: Randomized animation due to different timings. Kind regards Mikel

If you not comfortable attempting to build this yourself you can also look at fullpage.js https://alvarotrigo.com/fullPage/ It's a pretty good solution for bridging the gap until you are capable of handling this type of thing yourself. On the downside it completely scroll jacks the dom and forces you to work within it's requirements but on the upside it has a fairly robust set of callbacks allowing you to plugin your own animations, and a lot of options.

Welcome to the forums, @lucrampro. GSAP is a full-fledged, robust animation library that can animate pretty much any property of any object. It's not a canned solution that creates a specific effect like the one you referenced, but it can certainly do things like that. Unfortunately we don't have the time/resources to study the effects in a whole live site and provide tutorials for recreating them, but if you have a specific GSAP-related question we'd be happy to help. If you're just getting started with GSAP, I'd recommend https://greensock.com/get-started-js/ and of course the docs would help too. And https://greensock.com/learning/ Happy tweening!

Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!