Shaun Gorneau last won the day on March 9

Shaun Gorneau had the most liked content!

Shaun Gorneau

Members
  • Content count

    232
  • Joined

  • Last visited

  • Days Won

    3

Shaun Gorneau last won the day on March 9

Shaun Gorneau had the most liked content!

Community Reputation

397 Leader

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Hartford, CT

Recent Profile Visitors

3,636 profile views
  1. 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
  2. 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.
  3. 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.
  4. 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.
  5. 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/
  6. Can GSAP animation be tied to scroll?

    I just updated my first comment .. should help. Stick with it ... GSAP is awesome!
  7. 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
  8. 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.
  9. 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.]
  10. Multiple event handling (maybe Feature request?)

    Why wouldn't you package everything into one onUpdate call?
  11. "Scratch off" image to reveal a different one

    I guess my question would be "why?". GSAP is great at manipulating element properties over time and managing those timelines. The pen above illustrates something a bit outside of that scope. While I'm sure something could be whipped up with GSAP ... why when the solution in the pen handles it perfectly?
  12. Adjust animation time length depending on text character length?

    Sure can ... just grab the string length and perform some operation on it to get your desired delay. Then assign that delay value to the delay property. Here's an example,
  13. is there an easier way to do this animation?

    Something like this would work Edit: Just as mikel suggested ... I put a class on the green lines that should be "on" via the staggerTo.
  14. is there an easier way to do this animation?

    I think something like this could work for you. Note ... I had to reorder your polygons in the DOM so that they would animate in order.
  15. Continuously Tween += on Click- / Taphold

    I choose to animate a div within a masking container because it allows for the use of hardware accelerated attributes; in this case, 'x'. I helped another forum member out in a similar way to to tie a slider to the "scroll" (actually x) position of a group of tiles. It may contain some useful elements for you.