Jump to content
Search Community

harp30

Members
  • Posts

    33
  • Joined

  • Last visited

Everything posted by harp30

  1. Solved it - partially. The same issue is present but I made the second(.line2) come in '-=1' before so by the time .line1 ends half way .line2 will come in. Still not really working due to .line1 holding two blocks rather than one.. But still want to know how to set up .line for each block.
  2. Hello, Effect is looking quite beautiful all thanks to your guidance and support! Have one small dilemma, I want each line to cover only one block not two, this is what I mean: As in the attachment, the first line(.line1) takes up two blocks but only want one block for each line. This is causing an odd animation. How to fix this? Its weird because in codepen it works fine but in my project it does whats in the attachment below. Confused... Codepen link and attachment is below this: Codepen:
  3. Okay great thank you very much. Just to wrap my head around this: type: "chars, lines", <-- places current div content into chars and lines? linesClass: "line line++" <-- adding a class to each line and adding a line with incremented values: .line1, .line2, and etc? }), revertSplit = function() { introSplitText_Heading.revert(); }; let lines = document.querySelectorAll(".line"); <-- get all the line classes we generated above? const tl = new TimelineMax({ onComplete: revertSplit }); for (i = 1; i < lines.length + 1; i++) { tl.staggerFrom( ".line" + i + " div", <-- animate .line1, .line2, and etc. What does " div" represent? Shouldn't just the .line(1) be enough to target? Thank you.
  4. Hello, Just got GSAP CLUB MEMBERSHIP AND LOVE IT! SplitText is saving me soooo much time! I was trying to create an animation text effect like this site: https://en.leviev-group.com/about/ I love their big text animation which comes after the loading overlay. I was trying to do it but my animation timing or so seems off. Can anyone guide me on how to create a similar effect? Are they using multiple splitText objects for each line of text? Or is it all one? Very excited to learn! And also how can I make sure any word doesn't break? And revert function doesn't work for me. Thank you.
  5. Okay thanks. I purchased the Shockingly-green package. How do I use the Splittext.min.js in my project via webpack? place into a js folder within a subfolder named vendors? Thank you.
  6. Hello, Do I need to purchase the Business membership($150) to use GSAP for client websites? Thank you.
  7. Hello folks, I'm trying to learn how to create a smoke effect like this: http://uix.me/ They are using PIXI.js but I've never really used it - where do I start and how do I achieve that? Also, can this be done with Three.js or GLSL? Thank you?
×
×
  • Create New...