Shaun Gorneau last won the day on March 9

Shaun Gorneau had the most liked content!

Shaun Gorneau

Members
  • Content count

    238
  • Joined

  • Last visited

  • Days Won

    3

Shaun Gorneau last won the day on March 9

Shaun Gorneau had the most liked content!

Community Reputation

418 Leader

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Hartford, CT

Recent Profile Visitors

3,700 profile views
  1. simple Tweenmax set - not crossbrowser ?

    @mi_cky This is an SVG thing ... https://greensock.com/svg-tips#6rN7CWTfF0ZzR1wib1l3
  2. simple Tweenmax set - not crossbrowser ?

    Ah, @PointC! I completely ignored that this was a SVG attribute
  3. simple Tweenmax set - not crossbrowser ?

    I can't see where that wouldn't be cross-browser. Perhaps the DOM isn't ready by the time it's called where you are seeing an issue. Maybe try
  4. Rolling number effect

    Believe it or not, the trick here is the easing! I did something similar to kind of give a "slot machine" rolling aesthetic to the end of a sentence here What you'd want to focus on is the ease: Elastic.easeInOut.config(8, 0) For your case, "8" might be too much ... so modify that to get the right feel for your project.
  5. Suggestions Needed: Getting Started with GSAP

    For me, the things that stood out to me in the first few weeks were ... Chaining and offsets to create perfectly timed sequences of animations Labels! That I could rely on eases to make visually complex animations very simply Don't underestimate FromTo and Stagger! That you can animate any property of any object ... huge! The biggest feature of the platform ... the community! This forum is second to none.
  6. Best way to start with GSAP

    The best way, as I see it, is to watch a few videos and define some small projects for yourself (e.g. click a DOM element and make it move across the screen and then disappear). Then start tackling small, practical projects. Visit CodePen to both look at projects and to develop small projects. Experiment. Starting small and with specific goals quickly reveals the immense power in GSAP ... because bigger projects are really just a bunch of small projects strung together.
  7. Hover effect button mouseenter mouseleave

    A couple quick things ... you have a lot of variable names/selectors going on ... learnmore $learnMore '#learnMore' First and foremost, your first line needs to be capital `M` in the id `learnMore` because that is how the ID is assigned in the html, and you don't use the # when get an element by id. var learnmore = document.getElementById("learnMore") Then ... use your variable 'learnmore' ... not other misspellings; e.g. $learnMore. Technically you can use the '#learnMore' selector as GSAP has a built selector engine. But, for consistency, I would use the variable that is already created. Lastly, use event listeners to call the functions wrapping each Tween
  8. jquery trigger GSAP function if element is in viewport

    If you would like an/each element to be triggered only once, you should set the ScrollMagic Scene's reverse property to false.
  9. jquery trigger GSAP function if element is in viewport

    Well, this was just a little guidance. You can simply do the same thing for each element that needs to trigger a timeline. And, if you are going to be triggering many items (more than 5, I would say) I would defintely reconsider your position on ScrollMagic.
  10. jquery trigger GSAP function if element is in viewport

    You can do this rather simply with the following ... If you need something a little more complex and have an objection to ScrollMagic, you could look at the WayPoints jQuery plugin.
  11. Screen Scaling and opacity animation

    This is fairly easily achieved without ScrollMagic ... you just create your scaling and moving timeline, pause it immediately and then use scroll (position/determined distance) to set the timeline's progress. Here is a simple example https://codepen.io/sgorneau/full/jGKvVX/
  12. Can GSAP animation be tied to scroll?

    I just updated my first comment .. should help. Stick with it ... GSAP is awesome!
  13. Can GSAP animation be tied to scroll?

    Absolutely. Just pause the initial timeline and use the user's calculated scroll position (scroll distance/container height) to get a number from 0 to 1 and continually use that update value to set the timeline's progress() value. If you're already using jQuery, something like this var tl = new TimelineLite( {paused: true} ); $(window).scroll( function(){ var st = $(this).scrollTop(); var ht = $( '#some-container' ).height(); if( st < ht && st > 0 ){ windowScroll = st/ht; tl.progress( windowScroll ); } }); Of course with some actual animations happening on the timeline
  14. Problem with animations on iPad

    The problem is "-webkit-backface-visibility: visible;" on what is (or will become) the back face of the card. Change those to -webkit-backface-visibility: hidden; As Carl said ... I would isolate a single card in CodePen to see its behavior and display there. And then just replicate your solution to the other cards. I'm not entirely sure if that property value is being assigned through CSS, GSAP, or a custom script ... I just inspected it and changed the value to confirm that the property value does indeed fix the issue. Where that change needs to happen is not clear as I didn't poke through the source.
  15. Ken Burns effect starting from "cover" background size

    Dealing with background size can be tricky because of all the factors that determine which dimension grows due to various conditions. I would simply let the background image maintain all of its initial property values and react to the containers changing property values. Doing that means animating the element itself (for which the background image is being applied). [edited because I typed "simply" like 74 times, like an idiot.]