Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by alfianridwan

  1. Hey @miks, thanks for the Codepen, I have forked it. It works really well, plus it really help me kickstart Barba.js! For anyone else who needs more help in making the animation smoother, I added another class to animate the position of the logo itself, and added it in the timeline with tweenmax. Here's the edited pen: https://codepen.io/aahlfeeyann/project/editor/DWnwop
  2. Haha, its alright @miks, I understand what you try to do. I am just not sure how to apply it as a page transition. If you managed to do it with barba.js or smoothstate.js do let me know!
  3. Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect. Thanks!
  4. Hi all, I am doing an interactive exhibit for my school's graduation showcase. In one of the exhibit, I implemented Tracking.js, which could detect colours using a webcam. The effect I want to apply is that, once the webcam detect a specific color, it will append the empty h1 and p tags conditionally (example: if detect Red, append h1 to Header A and p tag to Text A, if detect Blue, append h1 to Header B and p tag to Text B). I use jQuery's .text() function to edit the empty h1 and p tags once it detects a colour. However, the effect is quite abrupt. Is there anyway to use GSAP to animate it? P.S: In the CodePen, I did not put in Tracking.js as CodePen could not access the webcam. I used the .click function to show the .text() abrupt effect I was referring to.
  5. Thank you Shaun for your patience and explanation. After a few trial and errors I finally managed to understand the code! Thank you so much once again
  6. Hey Shaun, Thanks for the amazing CodePen. I think that's exactly what I want to do. However, I'm still quite a beginner in JS and GSAP. There are some parts of the JS code that I don't 100% understand. I do understand that the styling of the card happens in the TimelineMax, but in the .each function() what does that code do? And the .on function() what does it affect? Thanks!
  7. Thank you very much for the detailed explanation, I know understand the code much better. Thanks!
  8. Hi all, I would like to replicate the App Store Featured App/Games animation. See this to see what it may look like: https://alfian.d.pr/B7ZbXP Basically, there will be 2 elements in which the styles would be the animated before modal is opened and a different styling after modal is opened. In the App Store case, its the image (increase width size) and the modal title (change x value position). In my Codepen, I would like to replicate such an animation but I have no clue to using the GSAP code to do this. I know I asked a similar question to which the answer was to use SPA (Single-Page Application), but for this case I think its possible to animate with modals. I am using this plugin for the full screen modal pop-up. Any ideas? Thanks, Alfian
  9. So far, this works best. I think its due to that "window.onload" javascript. Can you explain what it does to the rendering of JS and the relevant CSS? But thank you for your answer!
  10. I'll create a CodePen if the problem still persists, because I think it might possible be how I load the JS and CSS files and/or caching problems.
  11. Hi Carl, This method doesn't work for me. I think it might be how I write the Javascript, which caused it to render like that. See https://cl.ly/qB3P You can see that if you open a new tab and go to the website, the site will render like that. However, once you refresh it, it will render normally. Is there any workarounds for this, so that on new tab and website visit, the website will render exactly how it renders when user refresh the website? Thanks, Alfian
  12. Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11, Chrome, Safari). How do I fix the 2 problems? I have always thought it might be caching problem, but I have already tried to fix it using caching meta tags but the problem still persists. Is it a possibility on how I write the JS? (sorry, I'm still a newbie in JS!). Thanks, Alfian
  13. Thanks Sahil for the resource. I think that is exactly what I was looking for. Transitions between simple static HTML pages. Thanks!
  14. Hi @OSUblake AND @Dipscom, Thank you so much for the suggestions. I will look towards Vue.js for future projects that I would like to apply this effect to. Thanks for the detailed answer.
  15. Hi Carl, Thanks for providing me a source to learn more about the approach. I've read the thread that you shared. I realised that most of the examples are for applications, whereas for the website that I shared, its for a basic portfolio kind of website, using just HTML and JavaScript/jQuery with AJAX. For my knowledge, I have not yet learned any of the frameworks that the thread have stated as of now, as I only started serious web developing late last year. Do you have any basic resources on learning AJAX to manipulate the DOM so that I can achieve a similar animation effect with the website I've shared? Or do you think its not possible to achieve such an effect without Single-Page Applications? Thanks, Alfian
  16. Hi, I stumbled across a website that is using GSAP (TweenMax, based on Wappalyzer) to animate its elements, and I found one specific animation really interesting. If you visit the website in Desktop (http://thieb.co) and arrive at the home page, click one of the projects and you'll be brought into the specific project page. If you see carefully, the project title animates from the home page position to the project page position, and the URL changes. But the project title element is still the same. I was just trying to figure out how to do this and I've been searching all over the internet for this. Since the creator of the website uses GSAP, I guess this is where I can start. Does anyone knows how to create a similar effect for that? Or can lead me to a place where I can learn how to achieve that effect? Thanks, Alfian
  17. Hi Sahil, That's an amazing solution. Apologies for not looking up the Youtube channel. I'm very new to GSAP and this is my first project trying out. Your solution is amazing, + with easings it makes the animation look really cool! Thanks!
  18. Hi everyone, I am trying to perform an animation with a delay on every subsequent SVG 'path'. In this Codepen link you can see that every letter of the SVG logo is separated by a 'path'. How do I perform a DrawSVG animation delay for each path, similar to how it looks like in here. This was animated using Anime.js, but sadly it couldn't control the animation using events as good as DrawSVG, but the delay of each letter was what I'm looking for. Is there a quick way to do this? Or would I have to manually delay every path by giving it IDs? Thanks
  19. Hi Carl, Thank you so much for the simple yet effective solution. I will be purchasing the DrawSVG plugin then!
  20. Hi guys, This is more of a pre-sale question than a problem, to be honest. But I do need some help with the Javascript/jQuery. I'm working on an SVG animation using Anime.js, but I feel that there are limitations to the animation that's possible for SVG. I was trying to replicate https://thieb.co homepage animation. So basically on mouse down, the animation starts playing, and mouse up, the animation reverses to the empty state. Due to Anime.js's limitations, I was wondering if DrawSVG is able to replicate the aforementioned effect? With a 'completed' callback to prevent the animation from reversing once completed, etc. Here's what I got so far: http://alfianridwan-fms-stories.netlify.com/ with Anime.js Is it possible to replicate this with DrawSVG? (before I purchase the membership and find out that I can't replicate it!) Thanks, Alfian