Jump to content


  • Posts

  • Joined

  • Last visited

About fripi

  • Birthday 03/27/1978

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

3,873 profile views
  1. fripi

    Splittext and <pre>

    Thank you Jack, luckily it's a short snippet that needs to be animated So it was already very packed and by adding a lot of spans it works 🤪 it's great I love that plugin
  2. fripi

    Splittext and <pre>

    Hi, I'm trying to kind of animate a code typewriting. I'm using <pre> to layout the text and it starts well, but after 3 lines it doesn't respect any layout anymore and just put everything in one line any clues ? thanks
  3. thanks @Cassie I learned something new once more 🥳
  4. I changed some settings and tried to add an ease at the start and end of the whole animation, but now numbers don't start from 0 anymore, what have I done wrong this time 🙈
  5. https://codepen.io/fripi/pen/XWZYZww Yeah it is indeed pretty fast 😅
  6. in terms of gsap animation, how can I put a global time to handle all the repeats, if the total time is 10s for example, how to align all those durations ? animTl .add("p1") .to(n1,{y:"-=800", repeat:200000},"p1") .to(n2,{y:"-=800", repeat:20000},"p1") .to(n3,{y:"-=800", repeat:2000},"p1") .to(n4,{y:"-=800", repeat:200},"p1") .to(n5,{y:"-=800", repeat:20},"p1") .to(n6,{y:"-=800", repeat:2},"p1") .to(n7,{y:"-=160"},"p1")
  7. Well is it even possible to make 7 columns move that fast, animation/cpu/gpu wise ? I'm no developer, animating thing, I did it in after effect mut in html I'm not sure
  8. Hi, this is a great example of what I'm trying to do, I understand the logic and animation for 1 number, I started with a div going vertically from 0 to 9... But I need to go from 0000000 to 2.000.000 in 5 or 10 s, which is very fast and involves 7 columns, so I don't know what to do, just make everything move very fast without really counting maybe... any idea ? in terms of repetition/loops that means that those values should be used for each column: .2 / 2 / 20 / 200 / 2000 / 20000 / 200000 seems difficult to handle
  9. Thanks again, I modified my pen, it works great, I will try later to shorten that code if I understand how
  10. @Cassie is there a way to start from array[0] for each sentence, or must I create a word array for each like that let words1 = gsap.utils.toArray('#txt1 .w') let words2 = gsap.utils.toArray('#txt2 .w') let words3 = gsap.utils.toArray('#txt3 .w') let words4 = gsap.utils.toArray('#txt4 .w') ...
  11. thank you @Cassie that's a discovery for me now i can just update that array to create the needed gradient woooowww
  12. Hi everyone, I'm here again with something that can maybe be done just in js but as I use gsap for my banner animation I thought it could also help me with some "design" problem. I have very strict guidelines to follow : for every sentence in my banner, every 2 words the color must change (yellow > orange > red > orange > yellow > orange...). So I started by just manually put some spans with styles (second text block in my pen) but that makes the code kind of difficult to read and also it messes up the breaklines. As I already use splittext to make it appear line by line I was thinking that maybe i could set a color by breaking the sentences by words, but i'm kind of stuck there in the logic, has anyone an idea ? thank you
  13. again time to update some templates, they already updated to 3.9.1 ! oops wrong subject, it's Sizmek here and I talk about doubleclick, sorry
  14. They really listen and act quickly, I asked for an update 2 days ago and it's done, 3.8.0 time to update your templates 😁 <script src="https://s0.2mdn.net/ads/studio/cached_libs/cssruleplugin_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/draggable_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/easelplugin_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/easepack_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/motionpathplugin_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/pixiplugin_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/scrolltoplugin_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/scrolltrigger_3.8.0_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/textplugin_3.8.0_min.js"></script>
  15. Oh great thanks! Never heard of that keyword, again I learn something very useful ! Now that's exactly what I was trying to do