alfianridwan
alfianridwan's Achievements
Recent Badges
10
Reputation
-
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
-
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!
-
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!
-
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.
-
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
-
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!
-
Thank you very much for the detailed explanation, I know understand the code much better. Thanks!
-
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
-
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!
-
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.
-
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
-
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
-
Thanks Sahil for the resource. I think that is exactly what I was looking for. Transitions between simple static HTML pages. Thanks!
-
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.
-
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
