Looking for ConfChem? ConfChem now resides at its new site, confchem.ccce.divched.org

Lab3D (www.lab3d.me): A New Web-Based Resource of Interactive, Animated Organic Chemistry Reactions

Melanie Burger, University of Toronto
Michael Corrin, University of Toronto
Dr. Ghislain Deslongchamps, University of New Brunswick
Dr. Jodie Jenkinson, University of Toronto

November 25, 2013 - November 27, 2013

Lab3D is an online resource of animated organic chemistry reactions[1]. The resource is targeted at undergraduate students in their first or second year of organic chemistry. The reactions featured, nucleophilic substitutions and eliminations, are taught in the first year curriculum. Following ‘best use’ guidelines for instructional animations (Burke, Greenbowe, and Windschitl 1998), the animations in Lab3D are short, accurate, interactive, and are accessible outside of the classroom on the web. In addition, Lab3D is unique in displaying synchronized 2-D and 3-D animations simultaneously. The split screen video display is intended to help students intuitively connect the sub-micro and symbolic levels of molecular representation and construct more comprehensive and dynamic mental models of chemical reactions.

[1] Lab3D was created towards the requirements of a MSc in Biomedical Communications (BMC.erin.utoronto.ca, University of Toronto)

Article PDF: 



Lab3D (www.lab3d.me): A New Web-Based Resource of Interactive, Animated Organic Chemistry Reactions


Molecular visualization

Visualizations are symbolic constructions used to codify information in order to make it meaningful to learners (Kleinman, Griffin, and Kerner 2005). Visualizations (graphs, tables, illustrations, animations) are valuable in educational settings because they “help make complex information accessible and cognitively tractable”, and “help us think in visual rather than abstract, symbolic terms” (Uttal and Doherty 2008). In chemistry education, where the principle actors cannot be seen by eye, visualizations are of even greater significance.

In the history of molecular representation (Perkins 2006b, 2006a), numerous visualizations have been created to represent the different properties of a molecule. These can be generally divided into 2-D symbolic and 3-D particulate or sub-micro “representational levels” (Gilbert 2008). 2-D chemical structures (wedge-dash, Haworth, Fischer and Newman projections, etc.) are generally preferred for coding atom connectivity and stereochemistry, while 3-D representations (ball-and-stick, CPK, electron isodensity surface, etc.) are preferred for coding atom spatial arrangement, size and other molecular properties such as electrostatic potential, hydrophobicity and so on. The ability to switch rapidly between the representational levels and relate the complementary information that they offer can provide a deeper understanding of chemical reactivity.

Linking 2-D and 3-D representational levels is a challenge for undergraduate chemistry students (Gilbert 2008). That these visualizations are significant abstractions from reality (colour and value are meaningless at the molecular level) and cannot be directly compared to their referent make it difficult to develop 'representational insight' (Uttal and Doherty 2008), the understanding that the representation stands for something else, and that different representations can stand for the same thing (Fig. 1). In addition, the molecular visualization can demand a knowledge of topics in chemistry that the student might not yet have mastered, and consequently require greater cognitive processing. To be adept consumers of chemistry visualizations and take full advantage of their benefits, it would be helpful to provide students with a “visual education” of what the different levels show, and how they are related (Gilbert 2008).


Fig. 1. Various representations of glucose.

Ainsworth (2008) suggests that by showing multiple presentations simultaneously, a visual education can be provided. Firstly, a student can draw on the representation with which they are more familiar to inform their understanding of a newer or more complex representation: the more-familiar representation constrains inappropriate interpretations of the less-familiar. Secondly, cross-comparison of the representations highlights their shared, invariant features. This would enable students to more easily translate one representation to another. At the same time, cross-comparison also clarifies what features are unique to that representation and hints at the type of information that can be gleaned from it. Multi-representational displays may also serve as a tacit reminder that these are merely different ways of ‘dressing’ the molecular data and help to build representational insight.

Web applications are particularly well suited as a medium for chemistry visual education since rich media, such as 2-D and 3-D displays and interactivity, can be integrated. Interactive features allow students to interrogate information at their own pace, which can reduce the burden on cognitive processing (Lowe 2004). Interactive movies can show reaction dynamics explicitly, further reducing the burden on the student, since he or she would otherwise need to perform the transformations mentally (Lowe 2004). Digital media may also increase visuo-spatial reasoning. The use of molecular software contributed to significantly improved student performance in stereochemical tests over the textbook and hand-held model groups (Abraham, Varghese, and Tang 2010). The researchers proposed that the visuals generated by the software reinforced the natural method by which we form and manipulate mental models of molecules: first, by forming a mental image of the molecule, then performing a mental transformation (Abraham, Varghese, and Tang 2010). A stationary image is also initially presented in Lab3D, which the student then has the opportunity to freely manipulate.


The objective of Lab3D (Fig. 2) is to provide a learning resource for undergraduate students that facilitates comparison of the two representational modalities of chemistry visuals by showing side-by-side, synchronized 2-D and 3-D interactive movies. For each reaction, there are two organic reaction viewer windows, the 3-D animation viewer where the 3-D scene can be rotated, translated and scaled as the animation plays, and the 2-D animation viewer where a symbolic animation is shown. In addition, the type of 3-D representation (ball-and-stick, etc.) can be toggled using buttons to right of the 3-D viewer. An overview of the Lab3D user interface is shown in Fig. 2.


Fig. 2. Overview of the Lab3D user interface. (or click here for a walkthrough of the current site functionality). A) 3-D Animation viewer. As the animation plays, the scene can be rotated, translated, and scaled. B) The overall reaction equation is shown by default, but can also be hidden from view. C) 2-D Animation viewer. D) The animations are controlled through the media controls and slider. Play, pause, advance or rewind by a frame, move to the start or end, and scrub through the animation at your own speed. The slider functions also as a reaction coordinate, showing the location of transition state(s). E) From a list of general reaction categories, select a set of conditions. F) Toggle stick, ball-and-stick, and CPK representations. G) Toggle atom labels. H) Play a movie of the reaction with a surface representation. I) For smaller screens, click and drag to adjust the height of the 3-D viewer and bring the 2-D viewer “above the fold” of the browser window. J) Curated, contextual links are provided for additional information about each reaction.

Materials & Methods

The website was created in a multi-stage process:

1)      3-D data collection. Reactions were modelled in Spartan Student ‘10 (Wavefunction Inc.) using a coordinate driven approach at the B3LYP/6-31G* level of theory.

2)      3-D data ‘work-up’. Energy vs. constraint (internuclear) length was plotted and used to identify the transition state. Bonding information was updated to match and the resulting sequence of structures exported as a MDL SD File. Isodensity surfaces showing electrostatic potential maps were calculated and a movie was generated.

3)      Web application. The application framework for Lab3D was developed using HTML5, CSS3, and JavaScript (jQuery v1.9.1). The framework houses the following components:

i)   3-D molecular viewer. The 3-D viewer uses native Web technologies to load and display molecular graphics data. ChemDoodle Web Components (iChemLabs) was implemented to parse the molecular data (a MDL SD File is retrieved from the server) and generate 3-D WebGL representations.

ii)   Reaction equation. Reaction equations were drawn in the ChemDoodle Web Sketcher and exported for further editing. Additional features were generated using a custom library (Lab3D.js). Finally, the ChemDoodle ViewerCanvas class was used to display the reaction equation in the browser.

iii)  2-D symbolic animations and viewer. The 2-D animation sequence was storyboarded. Initial HTML5-ready JavaScript objects (symbolic representation) were generated using the ChemDoodle Web Sketcher. The 2-D animation was scripted from these initial coordinates. Atom movement, bond breaking, forming and order changes, and curly arrows were programmed to follow the 3-D animation. A custom extension of ChemDoodle's AnimatorCanvas class was used to play animations.

Future development

Following expansion of the reactions library and further testing and debugging, We hope to find partners in chemistry education would be interested in incorporating use of the tool in the classroom and providing feedback on use, changes in misconceptions (resolves previous misconceptions or creates new ones), and achievement.


I would like to eventually realize the incorporation of 3-D interactive chemistry animations within digital textbooks. While visuals have been constrained so far by the limitations of print medium, "rich-media", such as audio, video and 3-D objects can be incorporated within e-textbooks. For example, some biochemistry titles available on the Inkling platform showcase 3-D rotatable molecules. The movement of educational publishers towards digital publishing – despite perhaps slow adoption by students and teachers (Greenfield 2013) – creates opportunities to revisit and potentially elevate the quality of visuals in chemistry textbooks.


Abraham, M., V. Varghese, and H. Tang. 2010. "Using Molecular Representations To Aid Student Understanding of Stereochemical Concepts." Journal of Chemical Education no. 87 (12):1425-1429.

Ainsworth, S. 2008. "The educational value of multiple-representations when learning complex scientific concepts." Visualization: Theory and practice in science education:191-208.

Burke, K. A., T. J. Greenbowe, and M. A. Windschitl. 1998. "Developing and using conceptual computer animations for chemistry instruction." Journal of Chemical Education no. 75 (12):1658-1661.

Gilbert, J K. 2008. "Visualization: An emergent field of practice and enquiry in science education." Visualization: Theory and practice in science education:3-24.

Greenfield, Jeremy. Students, Professors Still Not Yet Ready for Digital Textbooks  2013. Available from http://www.digitalbookworld.com/2013/students-professors-still-not-yet-r....

Kleinman, R., H. Griffin, and N. K. Kerner. 2005. "Images in chemistry."1-5 and references therein.

Lowe, Richard. 2004. "Interrogation of a dynamic visualization during learning." Learning and Instruction no. 14 (3):257-274.

Perkins, James A. A History of Molecular Representation Part 2: The 1960s - Present, Feb 17 2006a.

———. A History of Molecular Representation Part One, Feb 17 2006b.

Uttal, D. H., and K. O. Doherty. 2008. "Comprehending and Learning from ‘Visualizations’: A Developmental Perspective." Visualization: Theory and practice in science education:53-72.


Rotation across single bonds in 3D


Sorry for commenting beyond the specified date....


A nice tool indeed!

Is there a way I can rotate parts of a 3D molecular representation across single bonds? It could help in enhancing visual clarity.

Will this tool work only with molecules or with any chemical moiety?



Rotation across single bonds in 3D

Hi Milind,

Sorry for the delayed reply - I've now subscribed to comments. Do you mean rotate part of a molecular about a single bond while the other part is stationary, or simply use a single bond as the rotation axis for the entire scene? I suspect you mean the former, which is not currently possible. If it were, how do you imagine using that capability to improve visual clarity?

Any molecular entity can be visualized with the ChemDoodle Web components: here's an example of proteins. What did you have in mind?


Yes, Melanie, I meant the former...

...where a part of the molecule remains stationary and the rest rotates.

Firstly, showing such rotation helps because the rigid molecule is not a reality. Molecules exist in all possible states of rotation and vibration, and a rigid picture reinforced through a powerful medium can harm.

Secondly it helps in explaining certain unexpected reactions where some obvious rule is ignored because of spatial considerations. I remember a situation where rotation using plastic models was used to explain regioselectivity(?) preferences.  I am writing from old memory: what I have written could be nonsense remembered by a non-chemist. [I got involved for cheminformatics reasons]

Thirdly, it helps to show where "unhindered" rotations are not possible around some single bonds in some large molecules.

I must add that even without this flexibility Lab3D is very intuitive and is a good aid to both teacher and student.

Thanks and regards


Not sure yet how to accomplish what you propose...

...but I agree that it would be useful, and help avoid creating new misconceptions. My supervisor, Jodie Jenkinson, is researching visual complexity in molecular animations, and has results that indicate that showing greater complexity such random molecular motion and crowding can actually improve understanding (as opposed to overwhelming the viewer). We discussed adding a feature to the website that would allow you to dial up or down the degree of bond bending/stretching/rotation shown in the 3-D animation during the early days of the project, but I haven't yet been able to figure out how to do this. 

Thanks for your feedback, it's really helpful to hear. I will certainly keep looking for solutions to this problem.


I would be interested in knowing more about your findings. You can get me on email:  mk AT achemz.com.




Actually Robert, there are a signifcant proportion of those responses that come from the UK - although the British students can do the first trigonal planar answer better than they rest, they then sink into the mire of 55 - 70% first right.

Actually the situation with them not being able to identify the geometry at the various atoms in alanine (given the Jmol and a colour legend and a still) is even more scary in light of what they had done just before in the same activity - question pages they had been exposed to multiple representations including ball-and-stick as per the activity to which I have given a link.



Re: Advance Picking API

Hi Bob,


Certainly. Because the Web Components are a toolkit for building scientific applications, instead of a black box that you just add to your work, we've designed a library to allow programmers direct access to mold the functionality they see fit. This is done through what programmers call an Application Programming Interface, or API (as opposed to say, such black boxes, where people use the functionality by clicking on buttons and your potential is predefined).


The entire ChemDoodle API is summarized here. We're planning on adding functionality to allow users to select atoms on a 3D canvas and measure bond lengths, angles, and torsions interactively, which is what I was referring to when I wrote about an "advanced picking API" (sorry, I was a bit tired this morning). We also have the best support of Lewis Dot Structures (read our tutorial here) out of anyone in the industry and we have more support coming, such as dot bond representations, 90 degree bond angle cleaning and auto-placement of attributes like charges and lone pairs; they're typically neglected because most cheminformatics companies tend to focus on applications for big pharma, whereas we are just as committed to education.


iChemLabs Cloud Services (advanced cheminformatics algorithms) are powered by our very mature Java API and can be accessed directly through Javascript. You can do things like search databases, calculate descriptors, read/write many chemical file types, and handle IUPAC naming. No other options in Javascript come close.


Anyway, if you're interested in anything in particular, feel free to ask. We make sure to fund and develop this library so that creative educators like Melanie have all the tools and power necessary to create great products like Lab3D.


I hope everyone has a Happy Thanksgiving!



Classroom Adoption

Hi Melanie,

In your paper you state, "We hope to find partners in chemistry education [who] would be interested in incorporating use of the tool in the classroom and providing feedback on use, ..."  This leads me to ask several questions.  How do you envision instructors using this in the classroom, and what are the complications that adopting it would require? Would it become part of their website? Would you host it? Would they be able to embed it into a PowerPoint style presentation?  Does it work on iPad or tablets?

I agree that your work seems ideal for an ebook and I would expect publishers to be interested in this type of work.  But for an instructor to adopt a technology they need some sort of certainty that it would be available for them in the future, right? I am hoping you might be able to share a bit on how you see instructors using this in the classroom, and the issues associated with adoption.

Thanks again for sharing this wonderful work with us.

Bob Belford


Using it in the classroom

Hi Bob, 

Thank you for your questions. Ghislain and I have discussed how this could be used as a visual aid during lecture, and we envision that it would be similar to how he uses Organic Chemistry Flashware in the classroom, where you would transition from your Keynote/Powerpoint presentation to a browser window to explain the reaction mechanism. Although not embeddedable within a powerpoint, the high level of control an instructor has over the animation, would, I think, make it an attractive alternative to a simple animation (or using a series of images and clicking through them rapidly, as a student I once tutored experienced).

Hardware would not be limiting since most everyone has a computer, a browser, and an internet connection. Since the resource is available online, students could access it during and after class for independent study. Parts of the website could be pulled onto the instructor's course pages using an <iframe>. You're correct that instructors would need some certainty that it would be available whenever they need it. While I believe I can indefinitely house the site on U of T servers, for extra insurance, if you like, you can always right-click, 'view page source' and copy the code and source files for yourself.

Because it uses WebGL, one limitation is that the website can't be viewed properly on an iPad (at the moment?), but I was able to test it on an Android tablet this summer and can confirm that it works. If the animations were incorporated into an e-text however, then the cost of a tablet would be prohibitive for some students. That might be less of a barrier soon though, especially if schools purchase them on behalf of their students.

As a side note, a current limitation of the resource as it is, is that it only shows successful reactions. It shows 'how', but doesn't really help with 'why'. It would be neat if you could 'adjust the temperature' or change the substrate on the fly and visualize how different conditions affect reactivity...


Hi Melanie,

Very cool tools- I can see a lot of potential for both research and practice. I like the idea of showing more than one representation. I wonder if you have studied students' perceptions of the different representations? Do they learn to recognize the value associated with the representation or do they simply have a preference for one over another? Also, in terms of the interactivity, it seems that it is largely used to control the pace of the different reactions or to select which representation is desired - although I might be missing something since I only briefly opened and practiced the elimination reaction. Do students find that this type of interaction is helpful? I would imagine students like to click and drag and move things around, but ultimately these are passive videos. Have you thought of other types of interactivity that might be more thought-provoking?

Another detail I found curious was the use of arrows in the wedge-dash representation. The initial purpose of arrows in static pictures was likely to imply motion, but now you have a video that shows the motion. I wonder if the students get the meaning of the arrows? Have you examined this at all?

  Thanks for sharing your visualizations!

Representation perception

re, "I wonder if you have studied students' perceptions of the different representations? Do they learn to recognize the value associated with the representation or do they simply have a preference for one over another?"

Really interesting questions. I haven't personally studied how students use the representations, but I have found a few reports of it being looked at by others. In his paper, Gilbert (2008, reference above) describes the results of 1991 survey of 39 chemistry undergraduate students where, with respect to the ball-and-stick representation, 30 were unfamiliar with the representation conventions (e.g. 'red is oxygen') but were "able to deduce them", and 9 were unfamiliar and unable to deduce. Those numbers are surprising, and I suspect that if we redid this study today that students would more familiar with these conventions. However, it still might be wise not to assume that every student is. Gilbert comments that the conventions of a representation are not systematically taught (this has also been my experience), which might be why "students get confused between the several representational systems … leading to an inadequate or incorrect understanding". He also helpfully includes a table on which type of representation is capable of showing what aspect of a molecule, which can be taken as prescriptive for educators and illustrators when deciding on visuals for teaching.

Thanks again for your questions, I've added them to my, "if I ever do a PhD", list.

Student comprehension of representations

I have one page in one of my activities that has a Jmol of alanine AND a still image of the same AND a legend which correlates type of atom (N, O, C and H)with its colour AND (if Jmol is ok on the users computer) a set of buttons where they can highlight the various atoms that they are being asked about.

The questions then ask them to identify the geometry about each of the atoms (answers are radio buttons with trigonal planar, tetrahedral, etc). With thousands of responses in hand, both from university and high school students, EVEN with all of that scaffolding available, the % first right answers range between 50 and 70%. I was gob-smacked! My conclusion is that we assume that these representations make life easier for students, it is not clear that they do. They obviously need training in the use of these representations beyond showing pretty balls and sticks.



my initial reaction was that your good NZ students had already migrated to Oz!!

However, during some Oral presentations by 2nd year students a week ago one of them devoted a minute out of their 10 to explain to the other 20 students that the representation they had depicted on screen was such that the red colours meant O, the blue meant N etc. I too was a little dumbfounded since I took it for granted that they had seen all this during their years of study and reading text books (nowadays full of pretty colour pictures).  It made me worry about what else I was taking for granted.....



Quick responses for now

Thank you for your questions and kind comments!

I have just a couple of quick responses for now, and will also return to your questions later this evening.

re, "but ultimately these are passive videos"

The 3-D animation should not be passive unless something has gone wrong (or we have a different understanding of 'passive'). If you click and drag inside the 3-D screen you can rotate the animation as it plays. Scrolling zooms in and out, and option/alt-cliking translates. In addition to those interactions, which come "straight out of the box" in ChemDoodle Web Components, there are a few things I've envisioned adding down the road: 

1) selecting an atom in the 3-D scene highlights that same atom across the 2-D animation and reaction equation, 

2) shift + clicking on an atom would reveal additional information about it and the molecule in which it is contained (see image below or click here, which was the concept I originally proposed for the website), 

3) an interactive graph of potential energy vs. reaction coordinate would also be shown in the 2-D viewer (see same image)

4) include the ability to draw/annotate the canvases and then export a jpeg of you annotated drawing

5) I believe iChemLabs is adding measurement features to their 3-D structure canvases, similar to what is currently possible in Jmol (perhaps they can confirm this), and once those are available I would want to implement them too.

6) Other suggestions I receive from you and others that would make this resource more valuable to educators and students!

re, "the use of arrows in the wedge-dash representation"

The arrows only appear when the animation is stopped (it's technically stopped as you scrub). When you resume playing the animation they should disappear. I included them so as to cue the viewer as to what to look for when the animation is playing. Learning how to draw curly arrow mechanisms is an important skill for undergraduate students, and hopefully they will find it useful to see the arrows at every stage of the reaction.

ChemDoodle Web Components measurement

Hi Melanie,


Yes, iChemLabs is adding measurement features to our 3D canvases. This is in addition to a lot of new features that will benefit educational projects, such as an advanced picking API, some of the best Lewis Dot Structure support and more advanced cheminformatics algorithms. The next year will be very exciting for academics and developers that want a truly powerful and professional chemical graphics and informatics system to build projects with.


For those of you who aren't familiar with them, the ChemDoodle Web Components are an HTML5/Javascript toolkit to allow you to create any type of product you want, as can be seen in the creativity and uniqueness of Melanie's work. This is opposed to most graphical scientific applications available today that only allow you to integrate a black box into your interface and little more. This is why many commercial educational companies are using the ChemDoodle Web Components, including Cengage LearningInkling and Taylor and Francis. The ChemDoodle Web Components are available under the open source GPL license with a very liberal exception for academic use. We also allow academics free use of our ChemDoodle Cloud functionality, for neat features like IUPAC naming. You can learn more about it here: http://web.chemdoodle.com


We are really excited to see brilliant solutions like Melanie's and we will definitely be there to support it and others that use the ChemDoodle Web Components. While we continue to add educational features, we will be looking at the projects that incorporate the ChemDoodle Web Components for inspiration. These are the projects that we will be showing to the thousands of customer institutions in over 80 countries that use ChemDoodle.


Anyway, it was nice seeing Lab3D again, Melanie. Good work.


Joe Polak

Senior Developer


Advance Picking API

Hi Joe,

Thank you for this input.  Could you tell us a bit about what you mean by your new projects like "advance picking APIs", and please realize many on this list have no idea what an API is. Likewise, what kind of Lewis Dot Structure support are you talking about, and what kind of advanced cheminformatics algorithms?

I really appreciate your input into this discussion.


Fowarded comment from Barbara Petelenz

I would like to congratulate the Authors of Paper 10 - I think that all these representations of molecular structgure will be always a great help for students

With best regards,

Thanks and a few acknowledgements

We thank you, Barbara.

I'd also like to take this opportunity to thank a few others. We are grateful for funding from CIHR, and the Vesalius Trust, and for technical support from iChemlabs (with purchase of a support package :). This project was also guided by other superb resources for chemistry reaction animations: Organic Chemistry Flashware/Dr. Ghislain Deslonchamps, and ChemTube3D/Dr. Nick Greeves.

Nature of Work

Dear Melanie,

I found both your paper and site very interesting and would like to thank you for sharing this work with us. Although I do not teach organic chemistry I can see how this material could be very useful and has the potential to enhance student understanding of organic reactions. I really like the idea of being able to concurrently watch 2D and 3D visualizations.

I note on your site (http://www.lab3d.me/ ) you have representative reactions for E1, E2, Sn1 & Sn2. How much work was involved in making these, that is, roughly speaking, how much time did you need to spend to create one of these visualizations?  Do you have a database or repository with additional examples?

I would like to thank you again for sharing this interesting work with us.

Bob Belford

Thank you for the invitation to share my project

Hi Bob,

Thank you for the invitation to share my project. I hope to gain feedback (from functionality suggestions to bug reports) that will help me improve the website.

Thanks for your question; The 3-D viewer, overall reaction equation go fairly quickly. What takes the longest at the moment is, perhaps surprisingly, the 2-D viewer. I'll break down what I do to create each reactions page to explain. 

For the 3-D viewer I typically try a few different things Spartan until I get I reasonable result, which takes ~1-2 hours, depending on the reaction. Since Spartan doesn't update bond order (https://www.youtube.com/watch?v=sAdygFw6PGg) I then update the bonding information either in the Spartan GUI or the outputted MDL SD file. The structures are then easily loaded and parsed by ChemDoodle Web Components into a Movie Canvas 3D. I have script that extends the animation by interpolating the frames, so I make sure everything looks as it should before going ahead. I have modelled data for 4 more reactions at the moment.

The reaction equation is also created quickly. I used the ChemDoodle JSON Generator Sketcher Canvas (http://web.chemdoodle.com/docs/chemdoodle-json-format) to generate the 2-D formula. I then have a script that adds molecular labels beneath the desired structure when I load them into a ViewerCanvas (http://web.chemdoodle.com/tutorial/2d-structure-canvases/viewer-canvas).

The bottleneck of the process is currently the 2-D viewer. I begin by drawing out a "story board" of the 2-D animation. I try to plan it so that minimal atom movements are required and those that are, are linear. I then draw the initial structures and get the JSON object. I then hand-code the 2-D animations that the position of the moving atoms depends on the current frame of the 3-D animation. For example, I write

if (currSlideVal <= (TS)) {
c.x = cRef.x - deltaMoveCx*currSlideVal;

Where currSlideVal is the number of the current animation frame, TS is the number of the transition state frame, c.x is the x position of the atom on the canvas, cRef.x is its initial position, and deltaMoveCx is the distance I want it to move every frame. Here, the atom only moves as long as the currSlideVal is less than the transition state frame. And so it goes. 

I hope this clarifies why I avoid y axis movements. For an entire reaction, this can take 1-2 days (longer if the reaction is multi-step). There are ways I think that this process can be expedited however, and I hope to explore and develop more rapid solutions, in order to more rapidly expand the site.

Finally, let me apologize in advance for further delays in replying to comments over the next three days. I'm currently at work, but I'll do my best to get to any questions during breaks, lunches and after hours.

Cool new tools / suggestions


I'd like to express my support to your work on 3d animations of organic reactions.

As a student, I got a C in my first test in Organic 1 and when I found the software Paul Young at UIC had developed (Young was my organic professor too), namely Organic Chemistry Online, I got an A in the next two exams that followed. Since then, I appreciate the usefulness of these animations as they have affected me tremendously.

Now, in relation to this work, and since I am not teaching organic chemistry myself I have the following question which could make this technology more applicable to other classes as well:

Could you program the same type of reactions, for explaining i.e. VSEPR (for General Chemistry) or Crystal Field Theory (for inorganic chemistry) ? I think that these are two topics that have not been worked on as much, compared to organic compounds (and now) reactions. Since I teach inorganic, one of the topics that its hard to grasp for students that experience it for the first time, is Crystal Field Theory and I would be very interested to see a similar animation where the top window would show how the ligands approach in 3D and the bottom would show how the d-orbital splittings are affected by the incoming ligands and the symmetry change. A followup to that would be discussion/animation of the Jahn Teller effect and others. If these are fairly easy to make, and if you want any help with them, I'd love to contribute to this work - just shoot me an e-mail.

Thanks again for the beautiful work and for sharing it with us.




re. Application to inorganic

Hi Christos,

I'm encouraged to hear that a similar resource was so useful for you. To answer your questions, for teaching VSEPR it would probably be ideal to be able to show lone pairs in the 3-D scene and currently (as far as I am aware) this is not available in the Web Components. To do something like this, however is trivial with ChemDoodle's Web Components builder.

I have much less experience in inorganic chemistry, but I think what you describe for CFT is possible. The process would probably not be much different from what I currently do for an organic reaction. One current limitation, however, is that you would not be able to show atomic orbitals in the 3-D scene (not available in the Web Components). Thanks for the invitation to collaborate; my priority is currently expanding Lab3D – if I expand the site to inorganic chemistry I'll be in touch!

CFT etc.


you could take a look at


and specifically


for Jmol displays for CFT. These are in the process of all being redone for JSmol for my January classes

For Jahn Teller effects, try


Jmol at present but soon to be HTML5/JavaScript with JSmol