Jump to content
Search Community

Zhiyi Zeng

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by Zhiyi Zeng

    SplitText plugin can't divide paragraphs

    in GSAP

    Posted

    7 minutes ago, mikel said:

    And: Please do not use the total quote to answer.
    Either mark a position partially or use the button 'I'll Answer This' (bottom left).

    OK, I won't do that anymore.

     

     

    7 minutes ago, mikel said:

    What do you mean by that? Please give a CodePen example.

    In your first CodePen example, I changed  

    <div class="quote quoteONE">SplitText makes it easy to break apart the text in an HTML element ... </div>

    to  

    <div class="quote quoteONE">SplitText makes <span style="color: red">it easy</span> to break apart the text in an HTML element ... </div>

    "it easy" will be red. However, in my computer, the color won't change.

     

    SplitText plugin can't divide paragraphs

    in GSAP

    Posted

    3 minutes ago, mikel said:

    Hey @Zhiyi Zeng,

     

    Does this pen help you?
     

     

     

     

    Happy tweening ...

    Mikel

    Yes, it helps a lot! Thanks.  It's an elegant way to do so.

     

    But, I'm wondering if there is any way for SplitText to keep paragraphs what they are. I have dozens of, but uncertain numbers of paragraphs in every passage, with some css files included. Such a solution would still wipe out all css styles. 

     

    Best regards,

    Zhiyi

     

     

    SplitText plugin can't divide paragraphs

    in GSAP

    Posted

    I'm trying SplitText plugin in official examples provided in Codepen. However, I don't know how to divide paragraphs. I mean, let's say there are paragraph One and paragraph Two, divided by <p></p> , if using SplitText plugin, <p> tag will not exist any more and paragraph one && two become one paragraph. How to keep two paragraphs divided while using SplitText?

     

    Here is a simple demo to illustrate more: 

    ```html
# before using SplitText
<div class="container">
  <p class="paragraph1">
    Hello, Gsap!
  </p>
  <p class="paragraph2">
    Hello, SplitText!
  </p>
</div>

# after using SplitText
<div class="container">
	<span>Hello</span>
	<span>Gsap</span>
	<span>Hello</span>
	<span>SplitText</span>
</div>

# What I want to get
<div class="container">
	<p class="paragraph1">
      <span>Hello</span>
      <span>Gsap</span>
	</p>	
	<p class="paragraph2">
      <span>Hello</span>
      <span>SplitText</span>
	</p>
</div>

```

     

    GSAP how to manipulate animation without accessing actual DOM?

    in GSAP

    Posted

    On 4/28/2019 at 1:47 PM, GreenSock said:

     

    Oh, sure. GSAP at its core is just a super-flexible high-speed property manipulator. It doesn't need a DOM. You can animate any property of any object. For example: 

      

    
var obj = {myNum:0, myString:"0px 20px"};

TweenLite.to(obj, 2, {
  myNum:100, 
  myString:"100px 80px",
  onUpdate: function() {
    console.log(obj.myNum, myString);
  }
});

     

    So it'll animate numbers or it'll even dig into complex strings to find numbers inside those and match them up in order.

     

    Sorry to bother you again, but I'm wondering if it's possible to manipulate Draggable and SpliteText plugin in the way that you show me above? From official examples I can see, it seem impossible to do that.

     

    Oh, by the way, the error message about not controlling DOM is in the screenshot which says _doc.getElementByXXX is not a function. Maybe it would help...

     

     

    2019-04-30_000414.png

    GSAP how to manipulate animation without accessing actual DOM?

    in GSAP

    Posted

    Thank you for your patient.

     

    It looks like there were some misunderstandings. To be clear, what I wanted to say is that WeChat doesn't have ANY DOM. The only way to use GSAP in WeChat is to manipulate data objects. Therefore, some data animations like countdown can be used properly. On the other hand, any animation involved in DOM, such as color animation, position animation, width/height animation, etc.. cannot be used at all ! 

     

    So, I just wonder if there is any way to use animations mentioned above by manipulating only data objects(like the data attribute defined in .vue file), in a word,  total data driven. If there is a way to do that, GSAP won't be limited by WeChat.

     

    I really want to give an online example. However, CodePen doesn't support WeChat Mini Program environment. Hope you'll get the gist.

     

    Anyway, I decide to buy a membership of GSAP. It would be a shame not supporting such a wonderful package. Three cheers to GSAP!

     

    GSAP how to manipulate animation without accessing actual DOM?

    in GSAP

    Posted

    Sorry for the delay. 

     

    Yes, I tried. Unluckily, WeChat only support using GSAP in data animation, such as counting down. When it comes to DOM objects' attributes, WeChat doesn't support changing those directly in JS. Is there any way to control DOM animation, like width or position, by purely controlling data?

     

    Too bad for not using GSAP?!

    How to clamp shapes like the color block in the middle container?

    in GSAP

    Posted

    Sorry, but I failed to upload screenshots.

     

    It's the color lines that change colors every time I click the letters in the left. For example, when letter "T" is clicked, the color line would turn red and move from below screen to middle. It's one of the Official Examples in the website. I know how to change the color, but I'm not quite sure how to clamp the color block shapes every time another letter is clicked and how the lines are squeezed and extended.  I assume it's about GSAP animation, right? 

     

    Thanks for the reply!

    2019-04-20_160221.png

     

     

×
×
  • Create New...