ohem
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by ohem
-
-
-
-
Classes are normally fine; when I was troubleshooting your particular example, it didn't work until I changed it to an ID.
I think I see the issue now; you were using a very old version of TweenMax (1.11.7). When I updated that to GSAP 1.18.5 in the same JsBin, classes work fine: https://jsbin.com/cahulavowo/edit?html,css,js,output
I think Codepen is generally better than JsBin because they make it easy to load the newest versions of TweenMax & all GSAP plugins.
-
1
-
-
I wonder why my example doesn't play in JsBin, I even tried in CodePen, no result
var tl = TweenMax.to();
should be changed to
var tl = new TimelineMax();
I also changed the rect class to an ID.
-
I fixed a few things to get it functioning; this should help you get started:
See the Pen wWzKgO by anon (@anon) on CodePen
Edit: these are the things I changed, for future reference:
- Changed var tl = TweenMax.to(); to var tl = new TimelineMax();
- Changed backgroundColor to fill
- Adjusted the transform origin so that it swings from the top
- Set the SVG overflow to visible so that the shape still shows as it rotates outside of the edges of the SVG
- Changed the class to an ID
-
This thread might help: http://greensock.com/forums/topic/9249-jittery-animation-with-slow-moving-images/
the 0.01 rotation trick works in most cases.
-
1
-
-
You might also find this post helpful: http://greensock.com/forums/topic/9173-scaling-an-element-becomes-pixelated/#entry36948
-
4
-
-
It's a common Chrome bug.
Adding
CSSPlugin.defaultForce3D = false;
to your Javascript file will fix it.
-
2
-
-
Hi,
I have a simple banner animation that I want to loop twice. The loop function will work the problem is I have a button on a different timeline that works independently. So when the banner restarts the button is still there and doesn't reset itself. I played around with some reset functions but in all honesty I have no idea what I am doing. I have pasted the code below with the current 2x loop. Can anyone explain how I can reset the button to start with the begging of the animation on the second rotation? Many thanks.
(function(){ var tl1 = new TimelineMax({repeat:2, repeatDelay:2}); tl1 .to('#myAd',.4, {opacity:1}) .from('#anObjectMoving',1, {scale:1.2, ease: Power2.easeOut},'-=0.5') //here is the rollover animation var btnAnim = new TimelineMax({ paused: true }) .to("#myAd_button", .4, { scale:1.1, ease: Back.easeOut }, 0); //button fades in here TweenLite.from("#myAd_button", .7, { autoAlpha: 0, scale:0, delay: 4, ease: Power3.easeOut, onComplete: function() { //this plays the rollover animation on hover document.getElementById("myAd").onmouseenter = function() { btnAnim.play(); }; document.getElementById("myAd").onmouseleave = function() { btnAnim.reverse(); }; } });Just put the button on your main timeline; it doesn't need to be independent.
var tl1 = new TimelineMax({repeat:2, repeatDelay:2}); tl1 .to("#myAd",.4, {opacity:1}) .from("#anObjectMoving",1, {scale:1.2, ease: Power2.easeOut},"-=0.5") .from("#myAd_button", .7, {autoAlpha:0, scale:0, ease: Power3.easeOut, onComplete: function() { //allows button rollover animation after the button has fully appeared document.getElementById("myAd").onmouseenter = function() { btnAnim.play(); }; document.getElementById("myAd").onmouseleave = function() { btnAnim.reverse(); }; }}, "+=3.5")-
2
-
-
AdHelper.js hangs on my Enterprise security environment
I see the preloader text, and no style is loaded because the preloader text is aligned right and partially out of the browser.And apparently I am going to have to uninstall and reinstall Animate to get the latest update that fixes the template import errors issue. I just have not had time.
Try my version when you get a chance; I simplified things a lot.
AdHelper doesn't require a preloader & I didn't include it. (It didn't really seem necessary for a lightweight standard HTML5 banner ad.)
-
1
-
-
Hi ohem
Just change the morph target to the path name inside the clip-path instead of the clip-path id. Once I did that, it all worked fine.
// change this .to("#clipper", 1, {morphSVG:".smoothCircle"}, "endIntro") //to this .to("#clip", 1, {morphSVG:".smoothCircle"}, "endIntro")Happy morphing.
Weird! I swear I tried that in one of my attempts. Thank you, glad it's working now.
-
1
-
-
Hi, I was testing out something with MorphSVG:
And I'm getting this error in the console: WARNING: cannot morph a <CLIPPATH> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.
I know that morphing clip paths is possible because I've seen it here:
See the Pen JYNRVN by osublake (@osublake) on CodePen
But in this case, it doesn't seem to work on my end. I tried adding convertToPath but that gets rid of the clip path altogether.
Any suggestions are appreciated. Thanks!
-
I tried AdHelper but I am not satisfied. It is complicated and unpredictable with possible errors and sufficient script. I like clean code. I think that is better to manipulate with HD bitmaps when they are doubled on stage?
Really? I haven't experienced any issues with AdHelper.
The nice thing about the highDPI code, is it will make text/vectors from Animate appear sharp on screens with any pixel density; even 3x or 4x, whereas if you author at 2x and scale down, text would still look slightly fuzzy on an iPhone 6+ for example.
-
It's actually just a small graphic (137 X 7) that sit's on a 300x250 canvas. So these methods don't seem to work for positioning individual graphics.
This does beg another question... I took this code from a tutorial I was using which used a sprite sheet. I wanted to use individual graphics but I kept the:
background: url(graphic.svg) no-repeat 0px 0px;
...even though it is not actually a background. So all my images are lined with that line of code. What would be there proper line of code to use to link separate assets if not using a sprite sheet.
This should help you with centering anything you need to center: https://css-tricks.com/centering-css-complete-guide/
This should help you with using SVG in general: https://css-tricks.com/using-svg/
-
3
-
-
for a background image like you have, background-position:center;
-
1
-
-
Thank you for your help so far it has been really helpful spotting the stupid mistakes I am making. I have made good progress
but I have a couple of questions which will help finalise this. So far I have 2 options for a button both which work but both have issues which I need to iron out depending if its possible.
The first is just a straight CSS button no JS required. The problem here is that it causes the GSAP on the button to stop working. The rollover works fine but so I guess I need to find an alternative way to animate it in (fade and scale) at a specific time . Is this possible?
See the Pen vNEpYm by ArnoldKos (@ArnoldKos) on CodePen
Another option I have which works great is here:
The problem I have with this one is that the local query.min.js file is pretty huge and I can't locate a smaller version that works with this particular button.
The one that I downloaded to work is 100K. However the bundled one that comes with GS which is only 3k doesn't seem to work?!
I basically just need //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
Is there a way to download it directly? I only seem to be able to cut and paste the code.
I am creating banners so I presume I need the files locally for the publisher.
Please help thanks!
You don't have to use Jquery. If you look at the first page of the thread; there are multiple variations of rollover animations with straight Javascript that don't require Jquery. Here is one example that does exactly the same thing as the other codepen you referenced but without Jquery:
See the Pen BzoKGy by ohem (@ohem) on CodePen
If you do use Jquery, you should link to the Google-hosted CDN to take advantage of caching instead of saving a copy locally: https://developers.google.com/speed/libraries/
The 3k plugin that's part of gsap is just a pugin that works with Jquery, not a replacement for Jquery itself. https://greensock.com/jquery-gsap-plugin
-
1
-
-
I see the issue. It seems to be scaling uniformly instead of stretching/squishing it. I see this in the latest versions of Chrome, Safari, and Firefox on my Mac.
Even though it says the width is 500px, the actual appearance of the image doesn't seem to match that.
-
2
-
-
If anyone have solution how to create retina ready template from those template is free to share with us. I would like to have script in template with math function, for example $WT / 2
Personally, I like to use AdHelper and just include that in my templates. You can use the highDPI() method to make all of the vector stuff from Animate look crisp at any screen resolution without building your whole banner at double the size, or highDPI(true,2) to enable high DPI support and then scale the banner down to the correct size if you are building at 2x the size.
Here are some simple DCM templates I set up with examples of both; you just have to be sure to include a copy of AdHelper.min.js with your published banners. Animate_AdHelper_templates_simple.zip
You can also modify these to include other AdHelper methods if you want to; this version just keeps it simple. I don't bother with the "sleep" method since I just make sure to keep the timeline less than 15 seconds, but I can see how that could be a useful addition.
More info about AdHelper here: https://github.com/CreateJS/html5ads/tree/master/AdHelper
-
1
-
-
Thank you for replying so fast and for the helpful advice!
I was able to get a smoother transition when using SVG blur, the box- shadow issue is no longer a problem. There is still a pixel staggering effect going on when the image begins to blur.
I tweaked the code from my previous pen to help others wth the issue I had.
Codepen Link
See the Pen EyjpBY by team (@team) on CodePen
Here's the same Codepen, but I'm using Base 64/DATA URL.
See the Pen VjLGZm%C2%A0 by team (@team) on CodePen
It's smoother with a faster/shorter tween and a more intense blur:
-
1
-
-
If you put this on Codepen it would be a lot easier to troubleshoot.
But the main issue I can see from looking at that is that you're targeting "#red" with your rollover state, but you don't actually have a div called "red". Try changing it to match the ID of the div you want to animate.
-
Hello,
I am trying to add a simple rollover animation to a button at the end of my banner as per this example:
See the Pen avybpY by ohem (@ohem) on CodePen
This link seems to be exactly what I want but when I add it to my script it fades in succesfully but it doesn't do any rollover animation.
For now I have just used #myAd_red" as a test button over the top of my original script.
I am a complete novice so if anyone can please spot any errors in my code I'd greatly appreciate it. (the rollover button code is at the bottom but I wanted to keep it in context incase there is some conflicts.
Many thanks.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>GSAP animation</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:800); body { padding: 10px; font-family: 'Open Sans', sans-serif; } a#myAdLink { display: inline-block; background-color: #666666; } #myAd { width: 300px; height: 250px; border: solid 1px #333; position: relative; overflow: hidden; opacity: 0; } #myAd #myAd_flame { position: absolute; background: url(flame3.jpg) no-repeat 0px 0px; width: 600px; height: 157px; top: 50px; left: -370px; } #myAd #myAd_marker { position: absolute; background: url(vue_cutOut.svg) no-repeat 0px 0px; width: 480px; height: 400px; top: -75px; left: -93px; //opacity:0.5; } #myAd #myAd_tagLine { position: absolute; background: url(tagLine.svg) no-repeat 0px 0px; width: 131px; height: 7px; top: 158px; left: 85px; } #myAd #myAd_date { position: absolute; background: url(date.svg) no-repeat 0px 0px; width: 211px; height: 42px; top: 20px; left: 42px; } #myAd #myAd_button { position: absolute; background: url(button.svg) no-repeat 0px 0px; width: 132px; height: 46px; top: 185px; left: 85px; } #myAd #myAd_red { z-index: 1; width: 140px; height: 40px; position: absolute; bottom: 20px; right: 20px; background-color: red; text-align: center; line-height: 40px; } </style> </head> <body> <a id="myAdLink" href="http://google.com"> <div id="myAd"> <div class="myAd_Img" id="myAd_flame"></div> <div class="myAd_Img" id="myAd_marker"></div> <div class="myAd_Img" id="myAd_tagLine"></div> <div class="myAd_Img" id="myAd_date"></div> <div class="myAd_Img" id="myAd_button"></div> <div class="myAd_Img" id="myAd_red"></div> </div> </a> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> (function(){ var tl1 = new TimelineMax(); tl1 .to('#myAd',.4, {opacity:1}) .from('#myAd_flame',1.2, {scale:3,left:600, ease: Power2.easeOut},'-=.5') .from('#myAd_marker',1.2, {scale:5, ease: Power2.easeOut},'-=1') .from('#myAd_tagLine',1.2, {opacity:0, ease: Power2.easeOut},'-=.5') .from('#myAd_date',5, {opacity:0, scale:.5, ease: Power4.easeOut},'-=1.5') .from('#myAd_button',1, {opacity:0, scale:0.5, ease: Power4.easeOut},'-=4'); //rollover CTA var btnOver = TweenLite.to('#myAd_red', .4, { ease: Back.easeOut, scaleX: 1.2, scaleY: 1.2, paused: true }); TweenLite.from("#myAd_red", .7, { autoAlpha: 0, delay: 2.2, ease: Power3.easeOut, onComplete: function() { $("#red").on("mouseenter", function() { btnOver.play(); }).on("mouseleave", function() { btnOver.reverse(); }); } }); }()); </script> </body> </html>
You're using the version from the beginning of this thread that relies on JQuery, but you haven't linked to Jquery in your document.
Add this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js'></script>
Or just use one of the other versions that doesn't require Jquery. I went through like 20 variations of that button rollover code before finding the perfect one! (With amazing help from these forums).
You should be able to repurpose this one for your needs:
-
1
-
-
Chrome seems to handle SVG blurs more smoothly than CSS:
See the Pen GJPjjQ by jonathan (@jonathan) on CodePen
And SVG filters work in IE unlike CSS filters, which is another plus.
hyconnect, I noticed you're animating your blur using CSS transitions (starting on line 124 of your CSS) which is another potential issue. I think generally CSS animations shouldn't be mixed with GSAP because it can cause conflicts.
-
3
-
-
sorry, i don't get it...
do you also have animate doc?
these are html docs...
Those are templates which can be imported into Animate and used as publish profiles. More info here: http://blogs.adobe.com/animate/using-animate-cc-html5-canvas-templates-with-multiple-publish-profiles/
Using publish profiles is helpful if you have any custom settings in your HTML so that you don't have to worry about overwriting the HTML file or making changes after you publish.
-
centre align svgs
in Banner Animation
Posted
The position would also need to be set to absolute for that one to work, and the element being centered also needs to have a defined width and height.