Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

PointC last won the day on August 14 2019

PointC had the most liked content!

PointC

Moderators
  • Posts

    3,315
  • Joined

  • Last visited

  • Days Won

    307

Community Answers

  1. PointC's post in Animate Illustrator Arrow was marked as the answer   
    Looks like you may have found a solution, but I made a quick demo from your code for you.
     
    See the Pen 0344a47f9acd42c391484e7a52db2c6c by PointC (@PointC) on CodePen

     
    Happy tweening.

  2. PointC's post in Creating an animated arrow was marked as the answer   
    Hi Rathagos 
     
    Welcome to the GreenSock forum.
     
    There would be several ways to accomplish a line drawing animation. You could use the DrawSVG plugin or you may be able to just animate the scale of the line. It would depend on how/what you're animating. Is this some sort of map image and the route lines will be straight? Will the routes be a curved path of some sort with an arrow icon drawing as it goes? Are the lines and map SVGs or just plain divs?
     
    At this point I'm just guessing about your project so I can't really give you any detailed answers. If you could put together a CodePen demo for us, we could get you some better information and guidance. Here's some information about that.
     
    https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
     
    Once you have that ready, please reply with the link and we'd be happy to take a look at it for you.
     
    Happy tweening.

  3. PointC's post in Adding Percentage Counter to GSAP Progressbar Animation was marked as the answer   
    You're really close. Just a few corrections and you'll be good to go.
    Your onUpdate call needs to be on the tween, not the empty timeline.  You have some CSS transitions on the elements which is causing a fight between GSAP and CSS animations. It's best not to mix the two. Your update function that changes the text was using .textContent = newPercent which is for plain JavaScript. You're using jQuery for that update so you'd want: $('#count').text(newPercent + "%"); Here's a fork of your pen with those changes. Hopefully that helps.
    See the Pen jmmdJq by PointC (@PointC) on CodePen

     
    Happy tweening.

  4. PointC's post in Bezier autoRotate Problem - Image not middle centered along path was marked as the answer   
    Hi Technics1210 
     
    Please try this:
    TweenLite.set("#car", {xPercent:-50, yPercent:-50}); Happy tweening.

  5. PointC's post in How to drag SVG clip-path with GSAP draggable? was marked as the answer   
    Hi venn 
     
    Dragging clip-paths or masks can be a bit tricky. You can create the draggable and then bring the clip or mask elements along for the ride. Is this what you wanted it to do?
     
    See the Pen JNEPwV by PointC (@PointC) on CodePen

     
    Happy tweening.

  6. PointC's post in Weird thing while rotating an SVG pie chart was marked as the answer   
    Hi GreenSnake 
     
    Welcome to the forum
     
    This looks like it's only happening in Chrome so I'm wondering if you're experiencing a BBox size calculation error on that group. I posted about that here:
     
    https://greensock.com/forums/topic/13681-svg-gotchas/?p=71862
     
    In your case, it's an easy fix though. Please use svgOrigin rather than transformOrigin like this:
    tl.to(div, 5, { clearProps: 'transform', svgOrigin:"319 200", rotation: 360}); From what I can tell, that change seems to fix any strange rotation issues in Chrome and should give you the desired behavior.
     
    Here's some more info about svgOrigin:
    https://greensock.com/gsap-1-16
     
    Hopefully that helps.
     
    Happy tweening.

  7. PointC's post in GSAP + ScrollMagic and one way animation was marked as the answer   
    Hi salamandr 
     
    Welcome to the forum.
     
    You just need to set your scene reverse to false like this:
        new ScrollMagic.Scene({          triggerElement: '.magic',          triggerHook: 'onLeave',          reverse: false      }) If you have multiple scenes with similar setups, you can also set that (& other properties) globally when you create the controller like this:
    var ctrl = new ScrollMagic.Controller({   globalSceneOptions: {     triggerHook: 'onLeave',     addIndicators: true,     reverse: false   } }); Happy tweening and scrolling.

  8. PointC's post in Change tween duration while its tweening was marked as the answer   
    HI Michael71 
     
    I would think changing the timeScale() would be the easiest thing to do. That's exactly what I did on my recent handwriting demo with a speed control dial.
     
    See the Pen MpLVvO by PointC (@PointC) on CodePen

     
    Hopefully that helps.
     
    Happy tweening.
     
  9. PointC's post in Splittext.js playing on scroll was marked as the answer   
    Hi Adveris 
     
    Welcome to the forum.
     
    Just a couple corrections and we can have this working for you. 
    I'm assuming you want the '.is-splited' SplitText to play when each slide hits its trigger in the window? If that's the case, you want to use your jQuery each() loop to create a scene for each slide. As you have it now, you're looping through the .content_text class, but there is only one of those so only one scene is created. Looping through the .slide class fixes that part. The other problem is that you're creating one big timeline for all the SplitText animations rather than one for each slide so the whole thing is triggered on page load. If you create a timeline for each slide in your loop and add it to that scene, you'll be all set. Here's a fork of your pen with those corrections:
     
    See the Pen evqNEP by PointC (@PointC) on CodePen

     
    One thing I find quite helpful when working with GSAP and ScrollMagic is to use the ScrollMagic addIndicators plugin. You'll see in my fork of your demo that we now have a a start indicator for each scene so you can be sure everything is created and working correctly.
     
    Hopefully that helps.
     
    Happy tweening.

  10. PointC's post in Should DrawSVGplugin work with em? was marked as the answer   
    HI Friebel 
     
    You can certainly use ems or pixels, but trying to mix the two can cause problems. Your SVG is using a pixel based coordinate system. If you want to use ems, you'll have to use that as your user based coordinate system. For an easy fix, I just wrapped your line element into a nested SVG and used ems as the coordinate system. It all seems fine to me in this fork of your pen: 
     
    See the Pen vxqQpd by PointC (@PointC) on CodePen

     
    You don't have to use a child SVG. I only did it that way in case you were planning additional SVG elements in the parent that were going to be using pixels since the parent was 570x150. If you want it all em based, you could simply do this too:
        <svg width="35.625em" height="9.375em"  viewBox="0 0 35.625 9.375">       <line id="lineElem" x1="0" y1="1" x2="10" y2="10" class="line" stroke="#ff0" stroke-width="0.5" />     </svg> See the Pen wJLQax by PointC (@PointC) on CodePen

     
    Hopefully that helps.
     
    Happy tweening.

  11. PointC's post in TweenMax + css calc() function as param value. was marked as the answer   
    Hi SakalaWeb 
     
    You wouldn't need to use CSS calc() in your JavaScript. I think innerHeight and innerWidth would help with your calculations. So something like this:
    var h = window.innerHeight; var w = window.innerWidth; That will give you the window dimensions. From there you can calculate the center by dividing each by two and then position your box in the center. (or as close to center as you want it).
     
    More info:
    https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight
    https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
     
    Hopefully that helps.
     
    Happy tweening.

  12. PointC's post in Start nested timeline not from beginning was marked as the answer   
    You wouldn't have to use tl.duration()/2 like I did. I only did that so the nested timeline would play at the same speed as it was intended. When you tween progress like that, it doesn't have to be the same duration as the original timeline. You can tween the progress at a faster or slower rate if you like. In your demo we know the nested timeline with the staggers is 2.5 so you could simply hard code the duration of the tween to 1.25 if you like. 
     
    Does that help at all?
     
    I do have a question though. If that nested timeline is going to repeat infinitely, does it have to be part of the master timeline? Couldn't it just be on its own? It could even be in a function that calls itself again onComplete. Maybe that wouldn't work for you. I'm not 100% sure what your final need will be for this.
     
    Happy tweening.

  13. PointC's post in How to simply the code which adds an array of tween? was marked as the answer   
    If you are using the same animation and starting at the same time on multiple elements, you can add the targets to an array. So Shaun's timeline could be further reduced to this:
    var tl = new TimelineLite(); tl.from('#elem-1, #elem-3', 1, { y: -100 })   .from('#elem-2', 1, { y:  100 }, 0); Happy tweening.

  14. PointC's post in SVG Polygon attributes - how to get them faster was marked as the answer   
    Hi wellygirl 
     
    Welcome to the GreenSock forum.
     
    Loops, loops, loops.
     
    If you have a lot of paths to go through, that's where loops make your life a lot easier. You'll notice in that pen that they're using jQuery's each() method. That simply loops through all the paths and does something to each of them. You can also use you own for loop to make the same thing happen. In either case, it's pretty easy to perform the same or similar action on a whole lot of paths.
     
    If you have trouble, please put together a demo and we can take a look for you. Here's some more info about that.
     
    https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
     
    Happy tweening.

  15. PointC's post in Reverse SplitText animation on Click event was marked as the answer   
    HI Adveris 
     
    Welcome to the GreenSock forum and thanks for being a Club GreenSock member.
     
    There are a couple things to correct. The first is that you were using an outdated version of SplitText which was wiping out your <a> tags when it split your copy. Using the current version will fix that. Here's an an excellent pen to bookmark for all the Club plugins and how to use them on CodePen.
     
    See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

     
    The other issue is that there is no 'onclick' event handler in jQuery. That would be for plain JavaScript and I'd recommend that you use .addEventListener instead. So you could write it either way:
    // plain JavaScript version document.querySelector(".menuLink").addEventListener("click", function() {   tl.reverse(0); }); // jQuery version $(".menuLink").click(function() {     tl.reverse(0); }); I made a fork of your pen with those updates. I would probably also recommend some other type of button to control the play()/reverse() of the SplitText timeline. As you have it now, once you click to reverse it, you have to run it again to see anything. Whereas a separate button would allow back and forth control. I'm assuming you made it this way just for testing, but thought I'd point that out.
      Here's the fork of your pen:   See the Pen wJxNRy by PointC (@PointC) on CodePen
      Hopefully that helps.   Happy tweening and welcome aboard.
  16. PointC's post in Update Split Text when user resizes browser was marked as the answer   
    Hi kimipt 
     
    Welcome to the GreenSock forum.
     
    You're looking for the SplitText revert() method. From the docs:
    .revert( );
    Reverts to the original content (the innerHTML before the split). https://greensock.com/docs/#/HTML5/GSAP/Utils/SplitText/revert/
     
    We also just had an extensive discussion about the same topic here:
     
    https://greensock.com/forums/topic/16210-split-text-and-browser-resize/
     
    Hopefully that helps.
     
    Happy tweening.

  17. PointC's post in Button each hover animates every element was marked as the answer   
    Thanks for the demo.
     
    Your each() loop to create the buttons is targeting the entire array of your a,b,c,d, and e elements. You have to use the index to target only the one in that particular button. Like this example:
    .to([e[i], d[i]], .2, {opacity: 1,ease: Sine.easeOut}, .35) You have to do that on each set() or tween where you are targeting those elements during your button timeline creation.
     
    Does that make sense?
     
    Happy tweening.

  18. PointC's post in How to properly arrange script for greensock in html was marked as the answer   
    Hi irvy 
     
    Welcome to the GreenSock forum.
     
    The order of the scripts can be an issue. I'm assuming your tween creation is in your script.js file? Please try loading TweenMax before that script. The other issue could be that you're loading the scripts before the box element so they're trying to tween an element that isn't there yet. You can load the scripts before the closing body tag and/or you can read about making sure the DOM is ready. Here's some info about jQuery's .ready() method.
     
    https://api.jquery.com/ready/
     
    Happy tweening.

  19. PointC's post in Tweening Multiple Elements Simultaneously was marked as the answer   
    Hi pfash 
     
    You need to use the position parameter.
    tl.to(stage.movieClip1, 1.3,{scaleX:1.3, scaleY:1.3, x: '+=30'}); tl.to(stage.movieClip2, 1.3,{scaleX:1.5, scaleY:1.5, y: '-=60', x: '+=40'}, 0); // the zero tells this tween to start at time 0 More info:
     
    https://greensock.com/position-parameter
     
    Hopefully that helps.
     
    Happy tweening.

  20. PointC's post in Gsap isn't working was marked as the answer   
    Try this. Go back to the CodePen and export it. That will give you all the files from the pen and you can compare it to your local version and see what's different. Just click the export button on the bottom and you can download a zip file with the entire demo.
     

     
    Happy tweening.

  21. PointC's post in StaggerTo Index Value was marked as the answer   
    Hi ryanf 
     
    Please try this:
    var timeline = new TimelineMax({repeat:-1}); timeline.add(TweenMax.staggerTo($item, .5, {autoAlpha:1, repeat:1, yoyo:true, repeatDelay:2.5, onUpdate:dotColorChange, onUpdateParams:["{self}"]}, 3))  function dotColorChange(){    $("#indexValue").text("index:  "+$item.index(this.target)); } Happy tweening.

  22. PointC's post in Mask when elements slide in? was marked as the answer   
    Hi erayner_45092 
     
    Masking and clipping can be quite frustrating and there may not be an easy answer to your question. Clip would probably work well, but is deprecated and clip-path seems to be somewhat problematic in some browsers. When it comes to universal support for masks and clips, we're in the wild west here.
     
    Here's an older CSS tricks Article, but has good info:
     
    https://css-tricks.com/clipping-masking-css/
     
    It also depends on what you'll be using for your design. Are these standard DOM elements or will you be using SVG or perhaps canvas? I personally find masking in SVG quite easy compared to the available options for a good old fashioned div, but that's just my opinion.
     
    I looked at the demo from your question and honestly, if it were me, I wouldn't use a mask. I'd probably just use a couple of fixed position divs to serve as my masks. You can get away with that if you're using a plain colored background like they did. Just plop a white div on each side of the content and give it a higher z index than everything else and then your animations will come from underneath those divs and look perfectly masked. It's a cheat, but it's easy.
     
    As far as your question about reducing your code - I'm only seeing a few tweens in your demo so it doesn't look like it's too much to me. You do have two tweens doing the same thing on two different target elements so that would be a great place for a stagger which can reduce some code.
     
    Hopefully this info helps.
     
    Happy tweening.

  23. PointC's post in Adding fill to an SVG was marked as the answer   
    Hi erayner_45092 
     
    Just a couple little things. Your fill color is a string so you need to put it into quotes. The other issue is your tween was running at the same time as your timeline so even if the fill color had been formatted correctly, the tween would have ended too quickly and you wouldn't have seen the change. Please try adding it to the end of your timeline like this:
    svgTween.from('.st0', 0.5, {fill: "#000000"}); If you do that, all should be working correctly for you.
     
    Happy tweening.

  24. PointC's post in Stagger animation was marked as the answer   
    Hi erayner_45092 
     
    You're close. You just forgot the stagger amount so it defaulted to 0. From the docs:
     
    stagger : Number   (default = 0) — Amount of time in seconds (or frames for frames-based tweens) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+=100", opacity:0}, 0.2).   Does that make sense?   Happy tweening.
  25. PointC's post in How to center an element gaining width? was marked as the answer   
    I'm just using the very handy xPercent (& yPercent) for centering purposes. Check out Carl's blog post for all the cool details:
     
    https://greensock.com/gsap-1-13-1
     
    Happy tweening.

×