namisuki

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

11 Newbie

About namisuki

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. namisuki

    Image slider with diagonal wipe - GSAP and SVG

    Hi @GreenSock and @Dipscom That helps me a lot, thank you 🙂 Have a great day.
  2. namisuki

    Image slider with diagonal wipe - GSAP and SVG

    Hi @GreenSock, Thank you so much for your reply. I implemented the desired effect with your instructions. it came out pretty well in the below code pen. however when trying the effect diagonally, I kind of have hard time figuring out which 'd' value to animate( when i try to animate the 'M' value nothing happens). please refer the second code pen to see where i'm standing right now. is there a way to set the rotation the clippath of the above codepen so that the effect looks diagonal or animating the 'd' values are the only option? diagonal try: Thank you.
  3. Hi There!! I've been working with GSAP for a while and it is awesome in every way possible for web animations. As a newbie, I stumble when I go about implementing some complicated animations (atleast complicated for me). It would be of great help if any of the superheros (anyone who is of great help is a superhero, LOL) could help me figure out a way to implement a wipe image slider animation like the one in the below link but that looks like the image is wiped from a black board (diagonal wipe of the attached codepen). slider animation: https://codyhouse.co/demo/animated-svg-image-slider/index.html sliceimage codepen: (here the slices fade away, is there a way to make each slice wipe away one by one revealing the next image? like SVG masking or clip path) Thank you! hope new year is going good for you.
  4. namisuki

    Paper fold effect for slider

    Apologies for late reply!! That wraps it up!! You rock!! Thank you so much.
  5. namisuki

    Paper fold effect for slider

    Hi @mikel That is exactly the effect!!! another year another success man! more success to be on your way. Thank you for your solution, you're pro. PS: if i need to add or remove images to the above? how do i go about that?
  6. namisuki

    Paper fold effect for slider

    Thank you so much for your reply!! you're really helpful. LOL i'm here after last year!!! actually thats exactly not the effect i'm trying to achieve. The first image is not shown twice it's actually same image url used in first and 3rd image that is why it looks like first image shown twice. (thats not necessarily required) the effect is like images are stacked in z index. when the user clicks the first image it does the 'closing' fold animation then it moves to the last in the stack. then the second image is shown withoit any animation which makes it look like the first image is removed form the stack and obviously the second has to be seen. i'm doing this in my attached pen in the OP. but the long code, firefox issue and the effect is the problem. Thank you so much, Happy new year!!! :D
  7. namisuki

    Paper fold effect for slider

    Hi There! I'm looking to create a slider that has a paper fold effect. the concept is, when the user clicks on the image that is visible on screen, it folds like a paper and then goes back of all the images and the image that was behind the visible image would show up on the screen. Each time the user clicks an image the same animation happens, when the user reaches the end of all the images, the loop again starts. (please refer my codepen to understand the effect further) i was able to partially achieve that with my codepen. however i need three things done with it, if possible. 1) could you please help me make the animation smoother? like the image first folds horizontally and then folds vertically then the z index happens. 2) i'm a newbie to gsap so i got whole bunch of code sitting there to make this effect happen...could you make the code simpler but still achieve the desired effect and functionality? 3) my slider fails in the z-index part in firefox, is there a possible fix? Thank you so much.
  8. namisuki

    Paper fold effect with GSAP

    That looks awesome!! really appreciate your skills!! Great!! Thank you, you too have a great weekend :D
  9. namisuki

    Paper fold effect with GSAP

    I'm trying to achieve this example in codedrops: (same exact effect) https://tympanus.net/Development/PFold/index2.html Thank you
  10. namisuki

    Paper fold effect with GSAP

    Hi @mikel Thank you for your version. i fiddled around with it sometimes and i got to the below effect (haven't achieved the desired effect yet but this is something i got). Is there a way to set css properties at the middle of an animation? like an onComplete callback function on completion of the first fold? I almost got the desired effect but the front 3 and front 4 was overlapping to the front after the first fold. so what i wanted to do was to set teh background of the front 3 and 4 to white on completion of the first fold so that it looks smoother. Thank you for your help
  11. namisuki

    Paper fold effect with GSAP

    Hi there! I'm trying to achieve the paper folding effect with greensock. in which when the div is clicked it starts animation like a folded paper. I was able to get the animation happen but i'm having problems making the backside of the paper to be animating with the front which makes it look like as if the image is being folded front and the backside of the image is white. Please help me achieve that effect with the attached pen. Thank you, Nami
  12. namisuki

    Booklet image slideshow effect with GSAP

    Hi @Jonathan Thank you for your reply, it helped me a lot! I got the below pen working well giving the booklet effect, but the problem is the second page kind of goes below the first page when turned. may i know how to overcome on that, so that it feel as if a page is turned? Thank you for your help, Have a great day!
  13. Hi Gsapians! Could you please help me achieve the booklet flip image slideshow animation just like in the link below. I would like to implement that in my project but i thought it would be better if i get a code snippet for achieving just that with GSAP rather than including the whole plugin. I know it is simple in GSAP than downloading a plugin for that but i don't know the way to come around with a technique. https://tympanus.net/Development/BookBlock/
  14. Hi @OSUblake Thank you for your reply, it helped me a lot, great explanation! Here is what i did, I created a master timeline and wrote all the animation inside separate functions with timeline for each and finally added it to the master timeline using the master_timeline.add(function_name()) method. it is demonstrated in your demo here: Mine edited: Thank you so much for you help!!
  15. Hi @OSUblake Thank you for your reply, Yes, it's a repeatig animation based on the scroll position. Something like the whole animation plays in reverse when scrolled up. May i know how? I thought the animation would play in reverse? Kind of like the second timline would play in reverse and then it switches back to the first timeline's endpoint and plays in backword in relation to the scrollbar position...if thats not the case could you please help me acheive that? Planning to have seperate duration box for each timeline. (The duration box for the first timeline is the #scene-1-duration-container) Thank you so much for your effort. Have a great day.