Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialShawn Parrotte
6,689 PointsAnimations not working for the "work.html" file, what gives?
I've got the same code between all three pages and the transitions work fine from HOME to TEAM and back, but when going to - or from - the WORK page they don't function properly. Help?
Iain Simmons
Treehouse Moderator 32,305 PointsCan you please share a Snapshot of your Workspace? That way we can see all of the code that is involved.
4 Answers
John Renzema
9,070 PointsI was having the same issue, and it was fixed by making sure the "active" class was on the correct page. I added the "animsition-link" class from my js file instead of manually entering it on each page independently.
also here is my html and js for reference.
<div class="row container animsition">
<header class="row header">
<div class="grid-third">
<a href="index.html" class="logo"></a>
</div>
<div class="grid-third">
<h1 class="description">We build apps</h1>
</div>
<div class="grid-third">
<nav>
<a href="index.html" class="active">Home</a>
<a href="work.html">Work</a>
<a href="team.html">Team</a>
</nav>
</div>
$(".animsition").animsition({
inClass: 'fade-in-right-lg',
outClass: 'fade-out-left-lg',
inDuration: 500,
outDuration: 300,
linkElement: 'a'
});
Eric Thompson
9,858 PointsI was having the same problem...on Chrome :-O
This is cray cray, but I switched over to my Safari browser and the animation for the work.html file works perfectly as it should. Switched back to Chrome and it doesn't work anymore. There is clearly something going on with browser compatibility or something. But the funny thing is that the index.html file and the team.html file work just as they should on Chrome (as well as on Safari).
It also looks like Dave was using Chrome in the video as well, but I can imagine this was shot some time ago, so it may have work on on Chrome once upon a time ago...
I started on Safari when I first joined Treehouse, but switched over to Chrome after seeing that most of the teachers were using Chrome.
Shaun Walker
5,824 PointsSame issue and also solved by testing in Safari. I then went back to Chrome, though and as I navigated between pages I refreshed each page a couple of times and it seemed to work fine then in Chrome.
Asa Smith
10,009 PointsI had this problem as well with both the team.html
and work.html
in the last video. If you right click on the html in the inspector you should get an option to "Edit Attribute" or "Edit as HTML". I had to add the class="animsition-link"
and the <link rel="stylesheet" href="js/animsition/animsition.min.css"
> file. I closed the preview window and reopened and it seems to be working fine now. Unfortunately the inClass
and outClass
properties are not changing for me now.
Iain Simmons
Treehouse Moderator 32,305 PointsHi Asa Smith, just letting you know I edited your answer so the code & HTML tags display correctly.
Asa Smith
10,009 PointsThanks @Iain Simmons
Shawn Parrotte
6,689 PointsShawn Parrotte
6,689 PointsIt seems that the main animsition class doesn't load on the work.html file. How can I fix this?