Jump to content
Search Community

Shaun Gorneau last won the day on September 8 2021

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators

  • Posts

    837

  • Joined

  • Last visited

  • Days Won

    23

 Content Type 

Everything posted by Shaun Gorneau

23
24
25
...
33
Page 24 of 33  
  1. Shaun Gorneau
    Why not just put the header tween in as part of the Timeline with a negative relative offset?
  2. Shaun Gorneau
    A couple quick questions ... by the looks of it, this isn't a continuous scroll, but a scroll to a paragraph as it becomes available via the 0.25 second check. Is that right? Also, what is causing that 0.25 second check to fire every 0.25 seconds? It seems to be that the check for new content should be calculated by predetermined intervals based on the audio playhead position. A codepen would definitely help ... you can simply create an array of a sample of chunks to be brought in dynamically by some check at a regular interval. that way we can see how the Tweens are being applied to the elements or containers.
  3. Shaun Gorneau
    My gut says this is a delay (in IE) with the handoff of the scroll event from the window to the overflowed container. I'm not entirely sure of that, but I would suspect it.
  4. Shaun Gorneau
    OK, I asked to help clarify for the OP ( @LeoZ ) because his initial question was about a typewriter effect on the placeholder attribute text. Just wanted to be sure I haven't missed some new development with TextPlugin Thanks @Carl!
  5. Shaun Gorneau
    @Carl, is it true that TextPlugin would work on the placeholder attribute (not just the DOM text)?
  6. Shaun Gorneau
    You can do something like this ...
  7. Shaun Gorneau
    Trick here is to append a clone of the first .slide to the end of #slider. Animate through for the count of the slides minus 1 (i.e. ignore the last slide ... that is to say, less than totalSlides minus 1 because we address them with a 0 index) so that as the last slide gets into position, the slider starts back from zero resulting in a fairly seamless loop.
  8. Shaun Gorneau
    Sweet!
  9. Shaun Gorneau
    That's not to say you haven't done things right! Your markup makes sense and is structured appropriately for its static (and default) purpose. I'm actually not a fan of bending markup to make Javascript work; I would actually use Javascript to modify the markup to make the Javascript work (i.e. progressive enhancement). That has a nice consequence; where Javascript isn't available (environment, errors, etc.) you get an appropriate outcome ... basic, unobstrusive HTML and CSS. So, in your case (and using my pen as an example) I would actually do something like this ... Now, I did the manipulation in a fairly verbose way ... it could be consolidated ... but I spelled it out to illustrate the manipulation. If this were to affect multiple elements on the page I would have wrapped the manipulation in an .each().
  10. Shaun Gorneau
    Yeah, animating any of the background properties won't affect the element's children since the background doesn't cascade. Too bad there isn't a "background-opacity" property! So you can change a background's color or position without affecting the element's content. Opacity, on the other hand, affects the the element (not simply its background) and all its children.
  11. Shaun Gorneau
    Trick to fading a background image and not the content is to separate the two from a markup standpoint. Using a container div with its position set to relative, place two children within the container; one for the background, one for the content. Set both of their positions to absolute, width 100%, height 100%, and be sure sure the stacking order places the content over the background (or explicitly set that with z-index). You're now free to animate any property (autoAlpha) on the background-image div without affecting the content div. Of course, you'd probably want to mess with some layout options to accommodate things like dynamic height (based on the content), but this should get things going in the right direction.
  12. Shaun Gorneau
    @mi_cky This is an SVG thing ... https://greensock.com/svg-tips#6rN7CWTfF0ZzR1wib1l3
  13. Shaun Gorneau
    Ah, @PointC! I completely ignored that this was a SVG attribute
  14. Shaun Gorneau
    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
  15. Shaun Gorneau
    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.
  16. Shaun Gorneau
    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.
  17. Shaun Gorneau
    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.
  18. Shaun Gorneau
    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
  19. Shaun Gorneau
    If you would like an/each element to be triggered only once, you should set the ScrollMagic Scene's reverse property to false.
  20. Shaun Gorneau
    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.
  21. Shaun Gorneau
    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.
  22. Shaun Gorneau
    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/
  23. Shaun Gorneau
    I just updated my first comment .. should help. Stick with it ... GSAP is awesome!
  24. Shaun Gorneau
    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
  25. Shaun Gorneau
    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.
23
24
25
...
33
Page 24 of 33  
×
×
  • Create New...