[Creating animatable page transitions]

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

[Creating animatable page transitions]

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!

[Creating animatable page transitions]

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!

[Animate appended elements]

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.

See the Pen OvQxrY by aahlfeeyann (@aahlfeeyann) on CodePen

[Animating modals]

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

[Animating modals]

5 hours ago, Shaun Gorneau said:

Had a bit of time this afternoon ... here is a quick crack at it.

 

A few notes ... the HTML, CSS, and JS are setup to support progressive enhancement. If JS isn't available, you'd simply get a tile with a background image and an overlaid title. Clicking would push through the the target URL.

 

jQuery does some restructuring to get better control from both a CSS and a Tweening perspective. I'm also using jQuery to handle the simple click events.

 

I'm sure adjusting some timings (or even tween orders) would produce a better result ... I haven't gotten there yet

 

Big note ... I wouldn't look it here in the embedded CodePen ... I would go out and view it in a narrower viewport.

 

See the Pen JLKbBm?editors=0010 by sgorneau (@sgorneau) on CodePen

 

 

 

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!

[Animation plays first on website load]

20 hours ago, Visual-Q said:

The way this works is first it adds a css style .js to the document(html) that hides it from view using visibility: hidden while all the assets are loading.

 

window.onload is an event that fires when the assets are finished loading, it's similar to document.ready which you may have seen before but fires later in theory when everything is loaded, including images.

 

On this event we remove the style from the document(html) that hides it and it regains normal visibility by default.

 

As such if you have any javascript that immediately sets or affects visibility or any other style attributes of page elements when it runs, the styles should be in place when the page becomes visible and prevent flash of unstyled content.

 

Some info about it on MDN

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

https://developer.mozilla.org/en-US/docs/Web/Events/load

 

It's also common to see the jQuery load method used for this:

 

$( window ).load(function() {

// Run code

});

 

https://api.jquery.com/load-event/

 

 

 

Thank you very much for the detailed explanation, I know understand the code much better. Thanks!

[Animating modals]

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

See the Pen wmWzPR by aahlfeeyann (@aahlfeeyann) on CodePen

[Animation plays first on website load]

23 hours ago, Visual-Q said:

You can also add a global handler something like this that will prevent the page from being visible until all assets are ready.

 

In head:

<style type="text/css">
  .js {visibility: hidden;}
</style>

 

<script type="text/javascript">
  document.getElementsByTagName('html')[0].className = 'js';
</script>

 

Before closing body tag:

 

<script>

// assuming jQuery was loaded with assets

window.onload = function() { $('html').removeClass('js');};

</script>

 

 

Discussion on SO of various page load event handlers:

https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load

 

 

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!

[Animation plays first on website load]

On 13/03/2018 at 10:42 PM, Shaun Gorneau said:

The best thing to do here for any kind of help would be to distill the problem down in a CodePen. We can then fork and recommend things to fix any issues you might encounter.

 

But, at first glance ... the get rid of the initial flash of the SVG, you can simply use some inline CSS to not display it, add "opacity: 0;" (or visibility: hidden;") to its selector in a style sheet, or load it in with JS within $('document').ready. (I'm sure there are other options I'm forgetting right now).

 

Edit: Dang it ... did it again.

 

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.

[Animation plays first on website load]

On 13/03/2018 at 10:41 PM, Carl said:

Nice work on the site. Looking good.

 

We really can't investigate a standalone javascript file with 100+ lines of code. 

However, if you are seeing elements appear on page load before you want to animate them, most often what you can and should do is set their visibility to hidden in the css

path {

visibility:hidden;

}

 

and then in the js when it comes time animate them use

 

TweenLite.set("path", {visibility:"visible"});

 

 

It sounds like your page is rendering before the js runs which is typical. So by setting the visibility to hidden via css, they will not be shown on the initial render of the page.

 

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

[Animation plays first on website load]

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

See the Pen by (@) on CodePen

[Animating same element between 2 pages]

Thanks Sahil for the resource.

 

I think that is exactly what I was looking for. Transitions between simple static HTML pages.

 

Thanks!

[Animating same element between 2 pages]

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.

[Animating same element between 2 pages]

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

[Animating same element between 2 pages]

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

[DrawSVG animation delay on every subsequent 'path']

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!

[DrawSVG animation delay on every subsequent 'path']

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

See the Pen PQEWYy by aahlfeeyann (@aahlfeeyann) on CodePen

[SVG Animation Play and Reverse on mouse/touch hold]

Hi Carl,

 

Thank you so much for the simple yet effective solution. I will be purchasing the DrawSVG plugin then!

[SVG Animation Play and Reverse on mouse/touch hold]

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

 

 

See the Pen by (@) on CodePen