WarenGonzaga
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by WarenGonzaga
-
I think this code will help you a lot! This is only a concept! You can modify this! CSS: (Only) body { height: 100%; background: url("http://demo.all4coding.com/magento/media/background/background_8.jpg"); background-size: auto; background-repeat: no-repeat; animation-name: backgroundEffect; animation-duration: 15s; animation-iteration-count: infinite; } @keyframes backgroundEffect { 0% {background-position: 0% 0%} 25% {background-position: 30% 10%} 50% {background-position: 0 30%} 75% {background-position: 30% 30%} 100% {background-position: 0% 0%} } This is the CODEPEN link for example --> http://codepen.io/Waren_Gonzaga/pen/WGAXQr Hoping it will help you to get an idea!
-
Hey there! You're still cool buddy! Yeah you got the point I realized that is a background-size not the background position! Any way thanks for the information!
- 5 replies
-
- 1
-
-
- background
- animate
- (and 1 more)
-
Hey buddy! We are glad you are here in this forum! You can achieve that in using css only! Even without GSAP! you can use the css animation here: http://www.w3schools.com/css/css3_animations.asp and then you can create a codepen so we can collaborate with you! Thank you for posting!
-
Hello everyone! I am trying to use GSAP with Animate.css to create flexible animation for banner ads. I know this is possible but I would like to know the best way to use GSAP + Animate.css to improve my coding. I've provided link for codepen! Any suggestion would be great! If you have experience with GSAP + Animate.css please comment here! What is Animate.css? --> a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. Thanks GSAP Masters! HTML: <div id="circle"></div> CSS: #circle { width: 200px; height: 200px; background: #222; border-radius: 200px; } Javascript: window.onload = init; function init() { TweenMax.set("#circle", {alpha: 0, x: "+=100px", onComplete: a}); } function a() { TweenMax.to("#circle", 1, {delay: 1, alpha: 1, onStart: aa}); TweenMax.to("#circle", 1, {delay: 1.5, onStart: ab}); TweenMax.to("#circle", 1, {delay: 2, onStart: ac}); TweenMax.delayedCall(2, ad); } function aa() { $("#circle").addClass("animated wobble"); } function ab() { $("#circle").css("margin-left","100px"); } function ac() { $("#circle").addClass("animated bounce"); } function ad() { $("#circle").removeClass("animated bounce wobble") }
-
great stuff on the web very useful!
-
How to animate smoothly this set of pictures looping.
WarenGonzaga replied to WarenGonzaga's topic in Banner Animation
Thanks man for reply! I will do your suggestion like on the link you've posted.. -
How to animate smoothly this set of pictures looping.
WarenGonzaga replied to WarenGonzaga's topic in Banner Animation
Hi carl! Thanks! I already saw this animation! I wanna make something like this! But I have only 4 pictures and separated files... This is so challenging... alpha doesn't seem so good to use for animation pictures with 4 different pictures. -
How to animate smoothly this set of pictures looping.
WarenGonzaga replied to WarenGonzaga's topic in Banner Animation
Good try man! -
The banners are so interactive not only responsive! cool idea on using gsap for advance banner animation!
-
Hi there guys! can you please help me I am struggling how to code the animation for it properly with my 4 separated frames images. I want to animate it smoothly and nicely like normal cyclist. Here's my code for animating 4 framed images. JavaScript: window.onload = init; function init() { TweenMax.set("#two, #three, #four", {alpha: 0}); animationOne(); } function animationOne() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); TweenMax.set("#one", {alpha: 1, delay: 1.3}); TweenMax.set("#two, #three, #four", {alpha: 0, delay: 1.3, onComplete: animationTwo}); } function animationTwo() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); } HTML: <div id="cyclist"> <img id="one" src="https://s32.postimg.org/inysw8m2d/wiggins_01.png"/> <img id="two" src="https://s32.postimg.org/ip8qpnnw5/wiggins_02.png"/> <img id="three" src="https://s32.postimg.org/c0279n2k5/wiggins_03.png"/> <img id="four" src="https://s32.postimg.org/j4k0io9th/wiggins_04.png"/> </div> CSS: img { position: absolute; left: 10px; top: 10px; bottom: 0; right: 0; } For full editing please go here: http://codepen.io/Waren_Gonzaga/pen/PzEzag Kindly fork my pen and please revise. It really helps me to figure out how to make a code for this animation.
-
Such a great stuff carl!
-
HI buddies! This is the update! if you want to apply delay on your animation please click the link below! Link: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/
-
Hi guys! I want to share my work on how to make a venetian effect using GSAP I hope it will help other guys on their animation! You can freely fork this project on codepen! thanks! Any feedback and improvements are welcome! Codepen Link: http://codepen.io/Waren_Gonzaga/pen/akywzY Big thanks to Jonathan and Jack of GreenSock for guiding me here! Pretty new here!
-
A really good answer!
-
Nice banners that is great!
-
I tested the two html5 animators for html5make and tweenui I think they are look good to use but I found that these animators are has their own limitation. Use automated banner creation you can use boilerplate for creating these animated banners.
-
This is awesome! using sprites with GSAP!
- 5 replies
-
- 1
-
-
- steppedease
- timelinemax
- (and 2 more)
-
It is technically question so I can make games.. thanks so if I will use gsap as animation platform for my game I will need to buy a license?
-
Hi buddy thanks for your response, I just want to know if we can use GSAP to make games? Like RPG games like pokemon for example! I am not going to fix my game I am asking for that is it possible to create game using only GSAP. my pen is just as simple game using GSAP
-
A great topic!
-
HI everyone! I am being active here! I made a simple game using GSAP I know it is possible but it is really hard to code a game using GSAP alone.. can you guys which part of gsap I am going to use if I want to make an awesome game using GSAP! Pen Link: http://codepen.io/Waren_Gonzaga/pen/dMpjMy Thanks heroes!
-
Hey guys I am pretty new in GSAP I am consider as newborn hero in using this animation platform for the web. Very complex knowledge needed for this animation but I want to share my idea on how to do this... shortly.... I made some pens for venetian... thanks Jonathan.. you are the hero and also may friend jack that helps me even in email! Thanks heroes! anyone can show off their on gsap for venetian just post here...
-
Is it supported by GSAP the animation for venetian mask effect animation? I surf the net about making a venetian mask effect using GSAP. If you guys know how to make please post here thanks! The animation look like this but using GSAP! Reference of animation: https://codepen.io/dudleystorey/pen/HrFBx
-
This is the answer! exactly this! thanks man!
-
I want to reverse the animation of width animating from 200px to 0px in this manner sinking from left to right. The codepen below is sinking from right to left is it possible to reverse this? Thanks! JavaScript: window.onload = init; function init() { TweenMax.to("#box", 0.5, {width: 0}); } CSS: #box { background: blue; width: 200px; height: 500px; position: absolute; } This codepen will explain. Link: http://codepen.io/Waren_Gonzaga/pen/kXoayv