Jump to content
Search Community

Search the Community

Showing results for tags 'children'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. Hi guys, I'm trying to stagger groups of paths. I have 4 groups, that I want to simultaneously start drawing but stagger the paths inside of each group with 0.5s. Currently, I'm just writing it 4 times starting them at the same label, and repeating the same tween code. Is there a way to shorten the code so I don't repeat it 4 times? If I add elements into the array, the timing is off. I could also write a function and pass the elements, but would it start at the same time? Is there a keyword maybe in tweenmax stagger feature for this? Thank you! const tl = new TimelineMax(); tl .staggerFromTo( '[id^=top-left] path[id^=top-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=top-right] path[id^=top-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-left] path[id^=bottom-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-right] path[id^=bottom-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )
  2. I'm quite new to the jQuery and GSAP and really need Your help . I'm having a problem in animating children div while parent element is hover using TweenMax/TimelineMax. I can animate css of children with jQuery like this: $('.div1').mouseenter(function () { $('.div2').css('font-size', '20px'); }); but since I want to build a really complex animation I would like to use TimelineMax to my code in place of "css('font-size', '20px');" but nothing seems to work. I've build a simple test.html to find a solution: <body> <div id="logo"> <p id="text">TEXT TO BE ANIMATED</p> </div> </body> and I've tried to animate my #text element with this code (obtaining only parent animation): $(document).ready(function () { var hoverEffect = $("#logo"); hoverEffect.hover(function() { TweenMax.to(this, .35, {borderLeft: "15px solid #00b89d"}) }, function() { TweenMax.to(this, .5, {borderLeft: "0px solid #00b89d"}) }); }); I've also tried jQuery .find() and .children() methods but failed... Thanks in advance for Your help
  3. please help me !! Sorry for the Google translation ( ㅠ_ㅠ) <style> .parent{width:500px; height:500px; background-color:#000} .parent .child1{position:absolute; width:100px;height:300px; display:none; background-color:#f00} .parent .box1{position:absolute; width:50px; height:50px; background-color:#0f0} .parent .child2{position:absolute; width:300px;height:300px; display:none; background-color:#00f} .parent.on .child1{width:50px; height:500px; display:block; background-color:#ff0;} .parent.on .box1{width:30px; height:30px; left:300px; top:300px;} .parent.on .child2{width:500px; height:30px; display:block; background-color:#0ff;} </style> <div class="parent"> <div class="child1"> <div class="box1"></div> </div> <div class="child2"> </div> </div> TweenMax.to(".parent", 1, {class:"+=on"}) //Does not work TweenMax.to(".parent .child1", 1, {class:"+=on"}) //Does not work I know that you can animate through classes. BUT How can I animate child elements through a class of parent elements?
  4. I'm new to GSAP and really like it so far. I have one challenge that I think could be easily solved by SplitText, but unfortunately my company isn't interested in going the membership route. Is there an alternative to achieving the same thing? I have a parent element with a header and a variable amount of paragraphs. I'd like to animate the header, then each paragraph in turn. That is, once the first paragraph is finished animating, the second paragraph starts animating. When the 2nd paragraph is finished, the 3rd starts animating, and so on. Here is some sample HTML: <article> <h1>My header</h1> <p>First paragraph</p> <p>Second paragraph</p> </article> Does GSAP have an equivalent of jQuery's $.each() function, such that I could call the same animation on an element with a class, like: $( 'article p' ).each( function() { tl.from( $( this ), 1.5, { rotationX : -90, transformOrigin : 'left top', ease : Elastic.easeInOut } ); } ) That's just pseudo code to convey my idea. I realize it won't work Thanks in advance for any help!
  5. Hello, I know it's possible to have mixed xml (with loader's and also other content), but I'm having trouble working out how to access XML in LoaderMax before child loaders have finished. For example, here's a simple version of my xml: <?xml version="1.0" encoding="utf-8"?> <content> <preload> <LoaderMax name="..." prependURLs="assets/" load="true"> <MP3Loader name="..." url="..." autoPlay="false"/> <ImageLoader name="..." url="..."/> </LoaderMax> </preload> <fonts> <LoaderMax name="..." prependURLs="assets/" load="true"> <SWFLoader name="..." url="..."/> <SWFLoader name="..." url="..."/> </LoaderMax> </fonts> <main> <prompts>Some other content</prompts> ... </main> </content> All good so far. I get an onChildComplete event for each item loaded, plus one for each LoaderMax itself. Once everything is loaded, I get an onComplete event. But... I really need an event for the XML file itself. I can access it once everything else has loaded, but I really need to access it before the load has completed (I'm assuming it's the first thing loaded?). Is this possible? I really hope it is!
×
×
  • Create New...