Jump to content
GreenSock

PointC last won the day on October 30 2022

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,990
  • Joined

  • Last visited

  • Days Won

    401

Community Answers

  1. PointC's post in Why is my hover not working? was marked as the answer   
    Hey again jellevrswk   ,
     
    I guess I was wrong. I thought Blake was going to post something. Anyway, I thought I'd take a shot at reducing your pen and save you from having to declare all those variables and duplicate tweens. By using a couple of jQuery arrays and each() on the buttons you can make it quite a bit shorter and simpler.
     
    I'm still learning quite a bit myself, but I thought maybe this would help you. The mods could probably tighten up the code even more, but this is what I came up with:
     

    See the Pen EPVXQa?editors=101 by PointC (@PointC) on CodePen
     
    Hopefully, that helps a bit. Happy tweening.
  2. PointC's post in Animating parts of my svg when clicked on another part of the svg (it isn't working) was marked as the answer   
    Hey jellevrswk  ,
     
    The console was just throwing an error because orangebutton wasn't defined and many of the variables were assigning themselves to the yellowblock and yellowbutton. I assume because of cutting and pasting each row. You had:
    var $yellowblock = $('#yellowblock'),   $yellowbutton = $('#yellowbutton'),   $redblock = $('#yellowblock'),   $redbutton = $('#yellowbutton'),   $blueblock = $('#yellowblock'),   $bluebutton = $('#yellowbutton'),   $greenblock = $('#yellowblock'),   $greenbutton = $('#yellowbutton'),   $greenblock = $('#orangebutton'),   $greenbutton = $('#orangeblock');  
    Just fix the variable assignments... and you should be all set: 
    var $yellowblock = $('#yellowblock'),   $yellowbutton = $('#yellowbutton'),   $redblock = $('#redblock'),   $redbutton = $('#redbutton'),   $blueblock = $('#blueblock'),   $bluebutton = $('#bluebutton'),   $greenblock = $('#greenblock'),   $greenbutton = $('#greenbutton'),   $orangebutton = $('#orangebutton'),   $orangeblock = $('#orangeblock');
    See the Pen VeLVEz?editors=101 by PointC (@PointC) on CodePen
     

  3. PointC's post in Gsap in a Conditional Statement was marked as the answer   
    Hi there sorciereus  ,
     
    Try these:
    if(scale1.offset().top === 0) { minimizeShoe(); } if(scale1.position().top === 0) { minimizeShoe(); } if(scale1.offsetTop === 0) { minimizeShoe(); } The first two are jQuery and the third is plain JS. The jQuery position() and offset() only return left and top properties. 
     
     
    }
  4. PointC's post in GSAP TweenMax news ticker - NON-Flash was marked as the answer   
    Hey Diaco - awesome as always.
     
    That's really cool that it only has 3 lines of JavaScript.
     
    I look at some of your pens and think "It can't possibly be that easy" , but there it is working beautifully every time.
     
     
  5. PointC's post in Complex Vectors to Morph was marked as the answer   
    Well, I'll throw my 2 cents worth out there too. 
     
    Everyone above is giving you really great advice and trying to save you a lot of work and I completely agree with Carl, Diaco and Blake.
     
    This thread caught my attention as I'm in the middle of a fairly complex morph right now. I'm morphing a horse into a saddle. The mane and tail are fairly complex with a large number of points. Now, the morph plugin works perfectly throwing a lot of points at it, but it's also a matter of making it look nice.
     
    In my case, I started with the entire horse as one path and tried to go straight to the saddle, but that wasn't looking good so I broke the horse into three parts (body, mane and tail) and morphed each of those into three pieces of the saddle. This is looking much better, but it's still quite a bit of work to get it just right and this is only three paths. I'm not sure how many paths you have in your SVG, but it looks like a lot. You have to remember, as Carl pointed out, it's path to path - not group of paths to group of paths.
     
    Regarding best SVG design practices - have you seen this post by Sara Souedian? It's really good information.
    http://sarasoueidan.com/blog/svg-tips-for-designers/
     
    best of luck in your project.
  6. PointC's post in Repeating flicker was marked as the answer   
    switch this:
    TimelineMax.to("#flicker", 2, {opacity: 0, ease:RoughEase.ease.config({strength: 0.3, points: 8, randomize: false}), repeat: -1, yoyo: true }); to this:
    TweenMax.to("#flicker", 2, {opacity: 0, ease:RoughEase.ease.config({strength: 0.3, points: 8, randomize: false}), repeat: -1, yoyo: true }); and it works
  7. PointC's post in Wrestling with how to keep styles seperate from TweenMax javascript was marked as the answer   
    Can't you just use this in your CSS?
     transform: translate(-50%,-50%); If you change that one line in your CSS, your first pen matches your second.
     

    See the Pen WQLpzG by PointC (@PointC) on CodePen
  8. PointC's post in GSAP/Bootstrap display and visibility was marked as the answer   
    Hi Kathryn ,
     
    I just removed the Bootstrap dependencies (CSS and JS) and added a local style for .hidden and this works just fine.
     

    See the Pen mezNPb by PointC (@PointC) on CodePen
     
    I also noticed that you were using TimelineMax in your JS rather than TweenMax or TweenLite. The console was also showing an error looking for jQuery as Bootstrap's js seems to need it.
     
    I'd recommend going into your Bootstrap CSS and just change the hidden class to an opacity of 0 and then the tween should work just fine.
     
    I hope this helps.
  9. PointC's post in MorphSVG invalid tween value was marked as the answer   
    Hi there stephenburgess8  ,
     
    I didn't see the MorphSVG plugin loaded on your codepen. Once I added that, your hamburger menu morphs to the X.
     

    See the Pen XmPjRO by PointC (@PointC) on CodePen
     
    Just click the little gear icon on the JS panel and add the plugin:
    //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=10
  10. PointC's post in DrawSVG - changing the direction (clockwise vs counter-clockwise) was marked as the answer   
    You can draw the stroke starting at 100% 100% and animate it to 0 100% which gives you a reverse.
     
    Here's your pen again without the x rotation I did on the other one.
     

    See the Pen bVKLBP by PointC (@PointC) on CodePen
  11. PointC's post in CSSRulePlugin not finding external stylesheet, works fine with internal stylesheet was marked as the answer   
    I tried this locally as well and can confirm that the CSSRulePlugIn doesn't seem to set the pseudo element when the stylesheet is external (internal worked fine). Whether this has something to do with bootstrap or not - who knows?
     
    As Jonathan mentioned in your other post about this problem, pseudo elements can be a bit tricky as you're finding out.
     
    As I mentioned in the other post - rather than fight this uphill battle with pseudo elements and extra plug-ins you can create the same effect by appending a div to each of those <li> elements.
     
    I forked your pen and switched those :before elements to an appended div with the same CSS. Now GSAP can animate/set any of those underline elements without the extra CSSRulePlugin.
     
     

    See the Pen OyvPeL by PointC (@PointC) on CodePen
  12. PointC's post in HELP - transformOrigin/smoothOrigin problem was marked as the answer   
    Hi unpaidintern ,
     
    I believe smoothOrigin is for SVG only at the moment. It isn't going to work on regular DOM elements. If you look at this page: http://greensock.com/svg-tips - at the bottom Jack mentions possibly adding smoothOrigin for DOM elements in the future, but I don't believe anything is available at this time.
     
    If I'm wrong about that, I'm sure someone else will correct me.
     
    Here is a revised version of your pen with the rectangle rotating correctly.
     
    See the Pen ZbrLPG by PointC (@PointC) on CodePen
  13. PointC's post in Draggable - changing CSS properties onClick was marked as the answer   
    Hi there d11202 ,
     
    You didn't have a CodePen so I made a really quick one using your HTML above.
     

    See the Pen qOpeEV by PointC (@PointC) on CodePen
     
    I set the color change for a dragStart, but you can also set it for a click. 
     
    I hope this helps.
     
    PS For future reference - a CodePen is usually the fastest way for others to help with your questions. Check out this post on how to make one:
    http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
  14. PointC's post in rotating one object around center and keeping the child object position fixed was marked as the answer   
    Hey there pixelarchitect   ,
     
    Like this? 
    See the Pen KpLzpG by PointC (@PointC) on CodePen
     
    I just added a group around the part you wanted to stay perpendicular and rotated it the opposite direction.
  15. PointC's post in GSAP Script - How to add ? was marked as the answer   
    Hey Lynx   ,
     
    Looks like you may be looking for the quick start video and information posted here:
     
    http://greensock.com/get-started-js#loading
  16. PointC's post in Selectors issue. was marked as the answer   
    Hi Yes!,
     
    Looks like your Codepen wasn't loading GSAP and the variable m had quotes around it.
     
    Please try this: 
    See the Pen JdaeeW by PointC (@PointC) on CodePen
×