Shaun Gorneau last won the day on June 3

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Content count

    398
  • Joined

  • Last visited

  • Days Won

    11

Shaun Gorneau last won the day on June 3

Shaun Gorneau had the most liked content!

Community Reputation

889 Leader

2 Followers

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Hartford, CT

Recent Profile Visitors

4,500 profile views
  1. Shaun Gorneau

    Photomotion style parallax

    Hi @jSwtch, I've covered some basics of this in a previous post ... it might be helpful. It doesn't handle the distortion at all, but can give a sense of motion and depth. It may be a starting point.
  2. Shaun Gorneau

    Reverse a Morph and then fluidly repeat from the start

    I'm not entirely sure what your end goal is ... but does this get you closer?
  3. Shaun Gorneau

    Attach menu icon to cursor on hover

    This is interesting And, I think actually doing something a bit different (vs changing the cursor icon) could work well ... instead of changing the cursor icon you could 1. hide the cursor 2. tween the change of the menu icon while 3. tweening the position of the menu icon to the cursor position Here is a simple CodePen demonstrating the basics of this
  4. Shaun Gorneau

    GSAP with mouseover JQuery

    if ($(".scale").mouseover) { ... will always return true because it will return all matching element properties ( i.e not return FALSE )
  5. Shaun Gorneau

    GSAP with mouseover JQuery

    Hi @lucrampro, GSAP certainly works well with jQuery ... but it looks like you're using jQuery incorrectly (if I understand what you want to accomplish). It looks like you want to respond to mouseenter and mouseleave ... simply a hover event. $(".scale").hover( function(){ TweenMax.to( $(this), 1, { css: { scale: 2, backgroundColor: "#343434" } }); }, function(){ TweenMax.to( $(this), 1, { css: { scale: 1 } }); } ); EDIT: Sorry @OSUblake, didn't see that we were responding at the same time
  6. Specifically to the part of the question "How can I get each line of balls moving a bit slower than the last line" ... you can pass a speed parameter to `new Circle` and use whatever math you like to calculate that value. I used something simple to illustrate.
  7. Shaun Gorneau

    First scrollTo

    In Safari 11 MacOS 10.13.6, I do see it on https://www.mandantum.com when clicking on "Ihr Projekt braucht Unterstützung ?" (as an example). First click scrolls to a lower position than any subsequent clicks which scroll to a higher (I assume "correct") position. Haven't picked apart the code yet ... because I just want to be sure this is specifically where you are seeing the isse, @mikel.
  8. Shaun Gorneau

    Animating y value in non-relative way

    Sounds good Just a note ... the absolute position is only within the relatively positioned parent ... which means it's locked to the parent's (or nearest relatively positioned ancestor) x/y scope. Just want to clarify. Absolute positioning within a relative positioned parent can save a lot of otherwise needed calculation.
  9. Shaun Gorneau

    Animating y value in non-relative way

    If what you're looking for is to have the width of the container tween but have the children tween their `y` position stuck only to the Y axis (no movement on X following the parent's tween) there are a few things that can make this possible. Easiest would be to use a Timline and have the children tween up after the parent has completed (or nearly completed) its width tween. Next option would involve a few wrappers, an `overflow: hidden`, and a `position: absolute`... here is a CodePen illustrating both.
  10. Shaun Gorneau

    Scroll top with hash tag

    Here is something that might help ... specifically lines 29 - 40 Hope this helps! CodePen can be tough with fragment ids ... you might want to pop it out to here ... Link with hash Shaun
  11. Shaun Gorneau

    Simple Animation of Height on Scroll

    Hi @Ash978, I've created a simplified CodePen to show how this can be done. Unless you're going to make a big case for ScrollMagic ... I would omit it to simplify things. Have a look here to see if this can help. Note ... your CSS is currently getting in the way of the button growing (overflow: hidden on the parent) ... so, for the example, I went the other way ... made it shorter. Happy tweening! Shaun
  12. Shaun Gorneau

    Want lines animate diagonally

    Hi @chiho. You can rotate the parent 45° and tween as usual . Here is a pen showing how.
  13. Shaun Gorneau

    smooth scroll one page to another page using gsap

    I'm not sure what you mean by needing only one menu. This is one menu ... is just a little logic to determine if path traversal is needed. If you truly want to avoid that, and if your project is hosted in the document root, you can simply use <ul> <li><a href="/#about">About</a></li> <li><a href="/#services">Services</a></li> <li><a href="/#contact">Contact</a></li> <li><a href="/terms.php">Terms</a></li> </ul>
  14. Shaun Gorneau

    smooth scroll one page to another page using gsap

    I've set up an example here for you to look at. To simplify what is going on here, I've moved Javascript to scripts.js, styles to style.css, and removed all references to ScrollMagic. http://shaungorneau.com/gsap-help/hybreeder/ The only thing you won't be able to see in the browser is the content of menu.php which is ... <? if( $_SERVER['REQUEST_URI'] == '/gsap-help/hybreeder/' || $_SERVER['REQUEST_URI'] == '/gsap-help/hybreeder/index.php' ){?> <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="./terms.php">Terms</a></li> </ul> <? }else{?> <ul> <li><a href="./#about">About</a></li> <li><a href="./#services">Services</a></li> <li><a href="./#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> <? }?>
  15. Shaun Gorneau

    Stop other animations on mouseover/leave

    Ah, yes @PointC! You bring up a point I forgot to highlight!! In the example, I removed the timelines and created individual tweens but I didn't explain that change! Thanks for pointing that out!