Jump to content
GreenSock

Dennyno

Members
  • Posts

    136
  • Joined

  • Last visited

Community Answers

  1. Dennyno's post in Draw svg text with scrolltrigger was marked as the answer   
    Hi guys, need to draw the text around the circle path by scrolling.

    I came from a @PointC demo that used the click event, and I changed it to scrolltrigger and scrub.

    Questions are: how to handle long text (many words with spacing?)  and most important: why on mobile I got problems and doesnt roll at all?

    Last (but not important, it's more to understand, being that Im lacking on svg animations ) how to make the first path draw itself before the text rolls? (Or fills the path itself with another colour [always meaning before the text roll] ?).  Do I need to draw a secondary path ?

    Thanks
    See the Pen VwQVzEW by DedaloD (@DedaloD) on CodePen
  2. Dennyno's post in Scroll to top buggy values was marked as the answer   
    Hi Blake!
    Solved both problems.
     
    EDIT: wrong url: https://staging11.whynot.media/unlock
    The wrapper was an <a> tag, so I'd needed to put a preventDefault to prevent default click action.
    Now I changed to a simple div and works smoothly.

    The problem Is that my percentage scrolls till 101~120 % on some pages.

    How can I put a maximum value? (Also is strange that the value is higher than the 100/100 of the height)

    (Sorry for not posting on codepen this issue, dont know how to replicate) 
     
  3. Dennyno's post in Scrolltrigger smooth background from data-attr (or other ways?) was marked as the answer   
    Solved. 
    Of course, being the gradients: images for the browser.. it can't tween and imagine what's between each step.
    Like a baby image and a man: CSS can't image what's between. LOL shame on me.

    Solved just changing the markup and an extra trigger on the first section.

    Now push thiisssss under featureddddd Jackkkkkkk @GreenSock ❤️😛 

    Ps extra question: is this doable even without data-attr? Just by observing default css bg colours? 
     
  4. Dennyno's post in Scrolltrigger smooth background from data-attr (or other ways?) was marked as the answer   
    Solved. 
    Of course, being the gradients: images for the browser.. it can't tween and imagine what's between each step.
    Like a baby image and a man: CSS can't image what's between. LOL shame on me.

    Solved just changing the markup and an extra trigger on the first section.

    Now push thiisssss under featureddddd Jackkkkkkk @GreenSock ❤️😛 

    Ps extra question: is this doable even without data-attr? Just by observing default css bg colours? 
     
  5. Dennyno's post in Scrolltrigger video + play on viewport was marked as the answer   
    Hi Blake,  what about loading a gif as video poster, to give the sensation that there's a video there? 💡
    Seems the easiest way to make eldest users understanding the movement. 😅

    Just one little hint: how to make the scaling staying always on center of the x-axis?

    I tried with transformOrigin:center center, but on my demo https://staging11.whynot.media/unlock the animation float to right.

    Ps thanks for the code

    EDIT: solved the codepen example (just adding the placeholder and cleaning the code, nothing extra, but it works as needed - even it's not the sexiest solution ever 😅)

     
  6. Dennyno's post in Change class on horizontal Scroll was marked as the answer   
    Thanks for anyone, solved by removing the carousel wide scroll-snapping, and appending it only to the last items.

    Now, just one extra hint: I set the animation to start after 150px... how to make it start after the first element has scrolled, indipendently from its size?

    Using grids, all the items are responsive, so let's suppose: on mobile  each item has 150px width, so it's good to put a starting point after 150px from top (in this case left), but on desktop each item could be, instead, 250px. So in this case I'll need an offset of 250px

    Thanks again
  7. Dennyno's post in Mouse Cursor Effect was marked as the answer   
    If still interested, I got it working here 
    See the Pen MWEpbZz by DedaloD (@DedaloD) on CodePen


    And on related post of my account, you may seen all the effects you can achieve.

    You just need to play with transparency, curls, and strengh .. 
  8. Dennyno's post in Gsap Drag Canvas Rotation was marked as the answer   
    Well then, tx anyway @OSUblake !
    I even gonna give up on this, cuz Regl gives many errors on console and makes Safari crashing on mobile
  9. Dennyno's post in Custom Foggy Cursor was marked as the answer   
    I see, ok then.. thank you!

    So sad I cant use that canvas on my code, having many divs in different positions and z-indexes... so trying to add that  as as the last element in the dom, with position fixed, gives problem: z-index:0 is higher then the body and it's stuff, and z-index -1 puts the canvas itself behind, so not visibile.

    I give it up this time
  10. Dennyno's post in CLIPPED TEXT FILL BACKGROUND SCROLLTRIGGER was marked as the answer   
    My fault.
    Always used a container as trigger.

    Gonna try the way you said, thanks .
  11. Dennyno's post in GSAP CAROUSEL WITH INNER PARALLAX was marked as the answer   
    That demo seems really what I was looking for!
    I will add a scrub and a pin and test it.
    Thanks!

    Yep the Codrops article (doenst) says it all, but they did many nested files and the tutorial vs final result is a bit (aka a lot) different, and there are many and many files that are missing from their easy demo.

    Btw thanks for the hint!
×