fripi

WOW thank you all, I'll study all those codes the coming days, it goes much deeper than what I need but always interesting to learn some tricks

This is more like it... I found a formula, it's not perfect yet, external circles aren't perfectly aligned to central one also their distance to the center isn't "responsive" https://codepen.io/fripi/pen/NWgpggK

no I think I don't need a bezier here, I need to place several divs around one central element, but they don't need to turn around, now I'm searchin for the math behind placing elements on a circle, rotation isn't a good option because the content must remain readable and horizontal. The screenshot in my first post shows what I try to do

Thank you, but the array was a bezier curve, and the circles where positioning on it

Hi guys, this a very old topic, now bezier is motionpath, tweenmax is gsap... and I can't figure out how to translate all this to gsap 3 ? What I try to do is this, I would like to make an intro animation and make the outer circles come one by one from behind the compas, that should be OK if I could place everything in a circle first, as I don't know the final size of the animation it should be responsive. I did a pen but as soon as I uncomment "location" var everything goes blanc "(index):7376 crbug/1173575, non-JS module files deprecated." https://codepen.io/fripi/pen/qBjraYz Any idea ?

Sorry I hadn't much time last weeks to give a detailed answer, thanks @Web Dizajner for doing so In the header section you can also call gsap and others libs, you can see all the google hosted libraries here: https://support.google.com/richmedia/answer/6307288?hl=en I usually always call those 2: <script src="https://s0.2mdn.net/ads/studio/cached_libs/easelplugin_3.5.1_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.5.1_min.js"></script>

Indeed That's what I tried but there are always new errors and it doesn't seem to overwrite what is done in the private function so... Just making a search replace in all files before delivery with sublime text is much faster

Great, thank you, seems indeed to work well ! But I really don't see how to fix that in a template, I thought that replacing "$RESP_HIDPI" with a part of the exported code could work but that changes nothing... well I can still make a batch "search/replace" after

Never tried XD, can it save a html file with clean placed divs ? Sometimes placement is so complex in pure code... Problem that I got more and more with Animate is complains of clients about blurry text on normal screens

You can export the default template and edit it to add an <a href tag around the canvas zone, and also add the needed clicktag codes in header, then just use that new template for all your animations (publish setting > more setting > html/js tab > export/import new)

Placing the elements (png, svg, jpg, text...) , creating planes and give them colours can be done easily with dreamweaver or the free "Google Web Designer" then indeed link gsap and start moving them. I most of the time use Adobe Animate to place everything as it gives me more masking options, and gsap to animate, but texts seems to come out blurry on non retina/hidpi screens

well I learned a lot with this project thanks

Hi, still have some 3D rotation problems, but not really related to GS, but maybe someone has an idea... Didn't want to create a new topic as it uses most of the code of the revolving doors. The codepen below works perfectly in Chrome, Firefox, edge, brave... on mac and pc but not safari, in safari it reacts super strange https://codepen.io/fripi/pen/abpXGxb

oh wow never heard of that property, thank you @GreenSock

thanks a lot @GreenSock globally for my banners it works great! But I have some visual glitch when I scale the container above 1.3, the words written on the doors are "in & uit" the "&" sits a little lower as intended but when all scaled to 1.3, the first half of it, on the white "in" doors disappears on chrome, Safari and Firefox seems ok, a known bug of Chrome ? https://codepen.io/fripi/pen/xxgzEGp

thank you @GreenSock for this great looking example. I didn't implement it yet because I tried to make it work just with the dark bg and less divs... Also I work with a mix of Adobe animate CC and this 3D DOM on top, that's why I always use "alpha" as in animate "opacity" isn't recognised. Transforming to Tl was my next step once the effect was ok ? I'm still learning the gsap way of doing it compared to tweenmax in the old flash ...

That's what I kind of started with the first "door", the one on the left going to the back : I change the alpha of the door itself, without adding a div on top, as the background will be darker, works fine. gsap.to($(".d1"), {duration: 3, alpha:.5, repeat:-1, ease: "none"}); BUT it doesn't work for the second door "d2" which is the one completely hidden in the back on start and appears on the right, there I used a from and I have a strange behaviour of the front and back faces gsap.from($(".d2"), {duration: 3, alpha:.5, repeat:-1, ease: "none"}); https://codepen.io/fripi/pen/xxgzEGp

any ideas for d1 to become a little darker and d2 from dark to light ?

Hi, so I did a new version where I use 4 "doors" and not just 2, seems more logic to play with z-index, but how ? https://codepen.io/fripi/pen/MWJGJBe EDIT: OK I just added some z-index and changed the animation to just rotate 90° and repeat forever, seems to work now maybe just adding some kind of shadow, getting darker when it goes to the back and from dark to normal when it comes to the front

Hi, I've already used that code in Animate CC, some things that can be forgotten: both your "maskedContent" and "mask_mc" have to be a movieclips cashed as bitmap for it to work. don't forget to call createjs position and sizing of the elements can be tricky, sometimes you think it doesn't work but it's just because your mask isn't at the good position

Hi folks, hope everyone is doing well! I'm working on a kind of "revolving doors" effect as the title tells. If you look at my pen you'll see it almost works, but at moments you see parts true others, is there a simple way to fix that ? I made it simple with only 2 planes subdivided in 2... but maybe I should use 4 and play with z-index during the rotation ? Would there also be a way to kind of add some "lightning" or shadow zone when doors get in the back, I'm not sure how to fix that ? Thank you for your help

?‍♂️ oh yeah sorry ? thanks for your time, makes all sense

Thanks, I'm trying it, and it works but... only one time, I just copied the code to animate and compared to your codepen, everything seems the same but it only works at the first mouse over, than nothing anymore... But I have a warning in my console: And when I use your next version of the plugin I have another warning:

Well that's exactly the problem, there is no x property in my code : http://www.sharpness.be/demo/tint_test/ I have one background plane, the button with text and that's all, nothing more... I copied everything from animate to codepen, used the same libraries hosted by google and I see the error in my browser console, not in the codepen one https://www.dropbox.com/s/p63lad4mgecyu9u/tint_test.zip?dl=1 Also it's Animate 2019, not the last version which has to many problems, I have to use it for this client

Hi everyone, working on a banner, need some tint change with mouse over, I already used it in the past but not since gsap 3 and I have this error message. Now it's in animate so the code isn't always the easiest to read, so I just paste here the code I used (on line 110 in the codepen) stage.enableMouseOver(); var root = this; gsap.registerPlugin(EaselPlugin); canvas.addEventListener('mouseover',overHandler,{ once: true, passive: true, capture: true}); function overHandler(){ canvas.addEventListener('mouseout',outHandler,{ once: true, passive: true, capture: true}); gsap.to(root.cta.txt, .3, {easel:{tint:"#FF4901"}}); gsap.to(root.cta.bg, .3, {easel:{tint:"#FFFFFF"}}); } function outHandler(){ gsap.to(root.cta.txt, .3, {easel:{tint:"#FFFFFF"}}); gsap.to(root.cta.bg, .3, {easel:{tint:"#FF4901"}}); }