Kikovich
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Kikovich
-
-
Hello again
Since three days now I'm getting my feet wet with GSAP. I'm more from the designer side, so it's quite a challenge
I'm using a technique explained in detail in this excellent video by Chris Gannon:
Create a Single Animated SVG File Containing CSS, Fonts & JavaScript
I made two banners this way with the help of Carl and Diaco (thanks again ), but in Codepen the animation doesn't play this way. I have to transfer the Javascript code to the code-window:
The original code of the SVG is embeded like this:
<object data="img/i-sharesBigsize.svg" type="image/svg+xml"></object>
And the SVG looks like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" viewBox="0 0 728 90" xml:space="preserve" overflow="hidden"> <defs> <style type="text/css">@import url('http://fonts.googleapis.com/css?family=Roboto:300');</style> <style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lora');</style> <script type="text/javascript" xlink:href="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"/> </defs> <g id="BGD"> <rect fill="#8ABD26" width="728" height="90"/> </g> <g id="smallTxt"> <text x="56" y="15" font-family="Roboto" font-size="10" font-weight="300" fill="#000000">Nur für professionelle Anleger</text> </g> <g id="text01"> <text x="56" y="54" font-family="Lora" font-size="28" letter-spacing="1" fill="#ffffff">Auf der Suche nach Erträgen?</text> </g> <g id="text02"> <text x="56" y="54" font-family="Lora" font-size="28" letter-spacing="1" fill="#ffffff">Nutzen Sie jetzt Aktiendividenden.</text> </g> <g id="i"> <path fill="#FFFFFF" d="M32.823,0.919H13.971v17.254h18.852V0.919z M33.142,77.925v-54H6.941v10.864h7.349v43.136H6.94v11.087 h32.912V77.925H33.142z"/> </g> <g id="Frame"> <polygon fill="#898989" points="1,89 1,1 728,1 728,0 0,0 0,89.941 728,89.941 728,89 "/> </g> <script type="text/javascript"> <![CDATA[ (function(){ var smallTxt = document.getElementById("smallTxt"), text01 = document.getElementById("text01"), text02 = document.getElementById("text02"), i = document.getElementById("i"), tl = new TimelineMax( { repeat: -1, repeatDelay: 5, onUpdate: showTime } ); function showTime(){ //console.log(tl.time()); } tl.set([text01, text02, i], {opacity:0}); tl.to(text01, 1, { opacity: 1 }, "+=2") .to(text01, 1, { opacity: 0 }, "+=2") .add("label1") .to(text02, 1, { opacity: 1 }, "label1") .to(i, 1, { opacity: 1 }, "label1") .to(smallTxt, .5, { opacity: 0 }, "label1"); }()); ]]> </script> </svg>
Now - at last - my question:
Is there a possibility to sychronise these two banners?
And: sometimes I get a error-message: net::ERR_CONTENT_LENGTH_MISMATCH
Does somebody know what the server is trying to tell me??
-
-
Hey, great solutions!
Thank you very much, Diaco and Carl!
I'm using Carls solution, because - for me, as a No-Coder - it's somehow more readable.
I adapted the timing it a little bit to make the blinking eyes look more natural.
I have to study Diaco's solution in depth, so that I understand how it's working...
-
We are just trying to convert our clients Flash-Animations to GSAP.
You can see a part of it in the Codepen URL. I used a Yoyo-Animation to make the eyes blink. But to make it feel more natural, I want some variations in the blinking. The time between the blinks is now at one second. How can I achieve these variations, so that ,for example, one time it takes 1 second, the next time it takes 2 seconds and so on. How can I achieve this?
Thx in advance!
-
Thank you very much Carl! Simple question, simple answer
But I'm new to this - and was trying a 1.000 things and didn't get it to work!
Thx again!
-
Hi,
I'm trying to make a very basic animation: two labels enter the banner from the left side, stop on a specific position and then fade out. (See Codepen)
This animation should repeat three times - but the third time without fadeout. How can I create this simple animation?
Thx in advance,
Chris
Synchronising two Banners
in GSAP
Posted
Thanks Carl for your answer. But I load the code like this:
In the original file that's working just fine, see here.