PaoloDoma
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by PaoloDoma
-
-
Hi, i'm trying to replicate the animations of the texts of this site: https://designcanada.com/
For example, how can i replicate the animation of "Stuart Ash" or "Canada's heritage of graphic design" ?
It's seem that there is a mask over all.
is there a particular function in GSAP? Now i only use a motion like this
TitoloSezione1Tl.from($TitoloSezione1, 0.5, {x:100, delay:1, opacity:0, ease:Power1.easeOut});
Thank you all
Paolo
-
Split Text
in GSAP
Thank's! It works!
I included the file in "bonus-files-for-npm-users" folder instead "minified/utils"
-
Split Text
in GSAP
Hi, yes i load SplitText.js
Thank you for help
PAolo
-
Split Text
in GSAP
Hi, i try to use SplitText but it don't work.
I made a simple page and i can animate the first text block
var $Test0 = $('#test0'); var Test0Tl = new TimelineMax(); Test0Tl.from($Test0, 0.28, {x:100, delay:0.5, opacity:0, ease:Power1.easeOut});
But if i try to use SplitText with the second block it don't work
var tl = new TimelineLite, mySplitText = new SplitText("#test", {type:"words,chars"}), chars = mySplitText.chars; //an array of all the divs that wrap each character TweenLite.set("#test", {perspective:400}); tl.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01, "+=0");
in my page there is
<div id="scroll-container" class="scroll-container"> <div id="test0" style="margin-top: 100px; margin-left: 100px;margin-bottom: 100px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac lorem lectus. Aliquam placerat dignissim augue. Donec eleifend nibh lorem, ac porttitor erat porta eget. Vestibulum tempor ultrices massa, at aliquam metus sodales consectetur. Aliquam a accumsan tellus. Donec ac sem vitae metus condimentum efficitur. Nulla volutpat cursus ante, id facilisis dui euismod et. Suspendisse hendrerit, ante ac accumsan fermentum, libero magna vestibulum augue, vitae vehicula nulla nisl nec neque. Quisque lectus nisl, aliquet id pulvinar eu, tristique id lacus. Mauris egestas ipsum vel elit sodales faucibus. Duis aliquet tempus ullamcorper. Sed vitae porta erat, et suscipit tellus. </div> <div id="test" style="margin-top: 100px; margin-left: 100px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac lorem lectus. Aliquam placerat dignissim augue. Donec eleifend nibh lorem, ac porttitor erat porta eget. Vestibulum tempor ultrices massa, at aliquam metus sodales consectetur. Aliquam a accumsan tellus. Donec ac sem vitae metus condimentum efficitur. Nulla volutpat cursus ante, id facilisis dui euismod et. Suspendisse hendrerit, ante ac accumsan fermentum, libero magna vestibulum augue, vitae vehicula nulla nisl nec neque. Quisque lectus nisl, aliquet id pulvinar eu, tristique id lacus. Mauris egestas ipsum vel elit sodales faucibus. Duis aliquet tempus ullamcorper. Sed vitae porta erat, et suscipit tellus. </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
Any ideas? Thank's
Paolo
Text Animation Mask
in GSAP
Posted
is perfect! what was missing me was the wrapper with hoverflow hidden
Thank's
Paolo